vue3+ts，slot插槽，表格组件封装

新建三个文件

• src\components\page-content\page-content.vue 表格公共文件

• src\view\main\system\department\config\content.config.ts表格数据配置

• src\view\main\system\department\department.vue 父组件，传输数据

1. department.vue

2. page-content.vue

条件渲染column数据（timer、handler、custom）

slot插槽对column数据进行处理和样式修改

编辑、删除方法的网络请求

3. content.config.ts

// 配置department的serach区域的数据
const contentConfig = {
pageName: 'department',
  title: '部门列表',
  button: '新建部门',
  tableColumn: [
    {
      type: 'selection',
      width: '60px'
    },
    {
      type: 'index',
      label: '序号',
      width: '80px'
    },
    {
      label: '部门名称',
      prop: 'name',
      width: '120px'
    },
    {
      label: '部门领导',
      prop: 'leader'
    },
    {
      label: '上级部门',
      prop: 'parentId'
    },
    {
      type: 'timer',
      label: '创建时间',
      prop: 'createAt',
      width: '170px'
    },
    {
      type: 'timer',
      label: '更新时间',
      prop: 'updateAt',
      width: '170px'
    },
    {
      type: 'handler',
      label: '编辑'
      // prop: 'createAt'
    },
    {
      // 插槽数据
      type: 'custom',
      slotName: 'leader',
      label: '上级',
      prop: 'leader'
      // width: '150px'
    },
    {
      // 插槽数据
      type: 'custom',
      slotName: 'parentId',
      label: '级',
      prop: 'parentId'
      // width: '150px'
    }
  ]
}
export default contentConfig