带你实现element-ui的el-table的动态复杂表头

• 哦这、这、这该死的无处安放的动态复杂表头啊

前言

1. element-ui作为目前使用人数较多的一个PC端UI框架，在前端开发者中是非常受欢迎的，即免费又开源。能快速的搭建一个项目。但在使用的时候需要我们再进行一次业务的二次封装，就好比说这个复杂表头。
2. 接下来我就教大家封装好一个动态的复杂表头组件，觉得好的话别忘记给我点个赞哦

第一步

在componets文件夹下创建一个名为complex-table的文件夹，放置容器组件和递规复杂表头组件

第二步

在App.vue中引入ComplexTable组件名称把复杂表头的数据和表格数据传入

第三步

接下来我们看complex-table组件下的index.vue，引入RecuveTableColumn组件

第四步

最后我们看RecuveTableColumn这个组件是怎么实现复杂表头的

看看效果吧

这样一个复杂表头就实现了，是不是很简单

使用一下自定义的数据的效果

在App.vue中使用

效果

代码

App.vue

<template>
  <div id="app">
    <complex-table :data='data' :tableColumn="tableColumn">
      <template #type-a>
        {{'我是自定义的数据'}}
      </template>
    </complex-table>
  </div>
</template>

<script>
import ComplexTable from "@/components/complex-table";
export default {
  name: "App",
  components: {
    ComplexTable,
  },
  created() {},
  data() {
    return {
      tableColumn: [
        {
          prop: "type",
          label: "窗口类型",
          children: [
            {
              prop: "type1",
              label: "类型A",
              children: [
                {
                  prop: "type-a",
                  label: "类型AB",
                },
                {
                  prop: "type4",
                  label: "类型AC",
                },
              ],
            },
            {
              prop: "type2",
              label: "类型B",
            },
          ],
        },
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "code",
          label: "工号",
        },
        {
          prop: "department",
          label: "部门",
        },
        {
          prop: "enable",
          label: "大屏显示",
        },
      ],
      data: [
        {
          name: "pppppppppp",
          "type-a": "a3123123",
          enable: true,
        },
      ],
    };
  },
  methods: {
    exportFile() {},
    currentChange(value) {
      console.log(value, "aaaaaaaaaaa");
    },
  },
};
</script>

<style scoped></style>
<style>
* {
  margin: 0;
  padding: 0;
}
html,
body,
#app,
#app > * {
  height: 100%;
}
</style>

complex-table.vue

<template>
  <el-table :data="data">
    <recuve-table-column
      v-for="column in tableColumn"
      :tableColumn="column"
      :key="column.prop"
    >
      <template slot-scope="scope">
        <slot v-bind="scope" :name="scope.prop"></slot>
      </template>
    </recuve-table-column>
  </el-table>
</template>

<script>
import RecuveTableColumn from "./recuve-table-column.vue";
export default {
  name: "ComplexTable",
  props: {
    tableColumn: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    RecuveTableColumn,
  },
};
</script>

<style lang="scss" scoped></style>

recuve-table-column.vue

<template>
  <el-table-column v-bind="tableColumn">
    <template slot-scope="scope">
      <slot v-bind="scope" :data="tableColumn" :prop="tableColumn.prop">{{
        scope.row[tableColumn.prop]
      }}</slot>
    </template>
    <template v-if="tableColumn.children && tableColumn.children.length">
      <template v-for="item in tableColumn.children">
        <recuve-table-column :key="item.prop" :tableColumn="item">
          <template slot-scope="scope">
            <slot v-bind="scope"></slot>
          </template>
        </recuve-table-column>
      </template>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: "RecuveTableColumn",
  props: {
    tableColumn: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

<style lang="scss" scoped></style>

产生的问题

1. 使用时升级一下vue的版本为2.16.4才有效果，太低复杂子表头的slot会有点问题
2. element-ui最好是2.15.8的版本
3. 有问题请留言