vue 简单的动态table表格封装

效果图

//代码

 table
          :id="baseTable"
          :datas="tableList"
          :heads="tableHeader"
          :active="tableActive"
          :page="page"
          :total="total"
          :stripe="false"
          :active-width="activeWidth"
          @editorData="editorData"
          @delectData="delectData"
          @currentPage="currentPage"
          @resourceData="resourceData"
        />

//pcode 自定义指令传权限code
data() {
    return {
      baseTable: 'baseTable',
      tableHeader: [
        { label: '编号', prop: 'number' },
        { label: '项目类型', prop: 'name' },
        { label: '类型组', prop: 'projTypeGroupName' },
        { label: '项目属性', prop: 'projectPropertyName' },
        { label: '学科', prop: 'subjectName' },
        { label: '任务类型', prop: 'projTaskTypeNames' } // todotodo
      ],
      tableList: [],
      tableActive: [
        { txt: '编辑', eventKey: 'editorData', pcode: [''] },
        { txt: '删除', eventKey: 'delectData', pcode: [''] },
        {
          txt: '定义资源组',
          eventKey: 'resourceData',
          pcode: ['basic_data_update']
        }
      ],
      isActive: false,
      activeWidth: 200,
      page: {
        pageNumber: 1,
        pageSize: 20
      },
      total: 0
    };
  },


methods: {
    editorData(){}
    delectData(){}
    currentPage(){}
    resourceData(){}
}