Vue3 封装el-table组件

封装一个el-table组件：子组件仅负责事件触发，业务逻辑（如API调用、状态更新）由父组件实现

  
    
    
      
        {{ row.name }}
      
    
    
    
      
        {{ row.price }}
      
    
    
    
      
        {{ row.sn }}
      
    
    
    
      
        
          {{ row.supplier }}
        
      
    
    
    
      
        {{ formatDate(row.storageDate) }}
      
    
    
    
      
        {{ row.region }}
      
    
    
    
    
    
      
        
          修改
        
        
          删除
        
      
    
  


import { defineProps, defineEmits } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
const props = defineProps({
  tableData: {
    type: Array,
    required: true,
    default: () => []
  },
  filters: {
    type: Object,
    required: true,
    default: () => ({})
  },
  supplierTagType: {
    type: Object,
    required: true,
    default: () => ({})
  }
})
const emit = defineEmits(['edit', 'delete'])
// 日期格式化
function formatDate(date) {
  return date ? dayjs(date).format('YYYY-MM-DD') : dayjs().format('YYYY-MM-DD')
}
// 筛选方法
const filterData = (value, row, column) => {
  return row[column.property] === value
}
// 操作事件转发
const handleEdit = (row) => {
  emit('edit', row)
}
const handleDelete = (row) => {
  emit('delete', row)
}


.data-table {
  margin-top: 20px;
}

在父组件中使用这个组件，并给他传值：

代码解释：

通过:data="tableData"将数组数据与表格绑定

通过:filters和:filter-method实现筛选功能，数据匹配逻辑在filterData方法中定义

声明组件props的语法，通过defineProps函数定义组件需要接收的三个属性

emit方法‌属于Vue 3的setup语法糖，通过defineEmits声明后使用，用于子组件向父组件跨层级通信