基础表格组件封装

一、根据column常用参数定义每列项的类型接口

（1）prop：字段名

（2）label：表头名

（3）width？：列宽

后续可增加

export interface columnType {
  prop: String;
  label: String;
  width?: String | Number
}

二、创建组件，定义prop，遍历渲染

1.导入column项类型接口，定义prop

defineProps({
  columnOptions: {
    type: Array as PropType<columnType[]>,
    required:true
  },
  tableData: {
    type: Array,
    required:true
  }
})

2.遍历渲染el-table-column，渲染基础表格

<el-table :data="tableData" v-bind="$attrs">
  <template v-for="item in columnOptions" :key="item.prop">
    <el-table-column
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      >
    </el-table-column>
  </template>
</el-table>