描述

  这是vue3+ts+elementPlus封装的表格组件,他满足普通表格、普通表格的动态表头。表头嵌套（目前满足三级嵌套）

使用yarn或者npm下载插件

   yarn add vue-table-plugins

   npm install vue-table-plugins -D

表格的使用

传值

defaultProps: {}; 绑定标签label的字段和多级表头时下级表头数组字段
tableHeader: [];表头
tableData:[];表格内容
toDoName?: string; 操作部分的显示文字
isSlot?: boolean; 是否显示操作

全局这侧

在 main.ts 里面引入插件并全局注册，组件中使用如下。

import vueTablePlugins from 'vue-table-plugins'

app.use(vueTablePlugins)

组件中使用

 const defaultProps={
  children:"lib",
    label:"label"
 }
 
 <t-table :tableHeader="tableHeader" :tableData="tableData" :isSlot="true" :defaultProps="defaultProps" >
    <template #toDo = "scope">
      <el-button size="small" @click="handleEdit(scope.scope)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.scope)"
          >Delete</el-button
        >
    </template>
</t-table>