简单封装一个element table组件

最近写业务发现每个页面都会用到table组件,每次都要写一大堆代码很不方便,现在就简单封装一个基础功能,后面陆续完善。

components, 新建table.vue组件,代码如下:





父组件引用:


      
      

// 引入
import TableList from '@/components/Table'
components: {
    TableList
},
// data
// 表格数据
      tableData: [
        {
          name: '张三',
          sex: '男'
        },
        {
          name: '李四',
          sex: '男'
        }
      ],
      // 表头数据
      tableHeader: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '性别',
          prop: 'sex'
        },
        {
          label: '操作',
          prop: 'operation',
          scopeStatus: true
        }
      ]

实现效果图:


简单实现一个table组件的封装,后续还需增加其他功能,持续更新中。。。

你可能感兴趣的:(简单封装一个element table组件)