基于ElementUI table表格 二次封装

基于ElementUI table表格 二次封装

table 组件

<template>
  <!--table组件-->
  <div class="com_table">
    <el-table
      :data="TableData"
      ref="TableData"
      @selection-change="handleSelectionChange"
      v-bind="TableTree"
      :header-cell-style="{ background: '#f1f4f8', color: '#90A6BA' }"
    >
      <!--table列-->
      <template v-for="(colConfig, index) in TableHeader">
        <!--如果插入列-->
        <slot v-if="colConfig.slot" :name="colConfig.slot"></slot>

        <template v-else-if="colConfig.children && colConfig.children.length > 0">
          <el-table-column v-bind="colConfig" :key="index" align="center">
            <template v-for="(item, i) in colConfig.children">
              <el-table-column v-bind="item" :key="i" align="center"></el-table-column>
            </template>
          </el-table-column>
        </template>

        <el-table-column v-else v-bind="colConfig" :key="index" align="center"></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
/**
 * 数据示例
 * 
 * TableData ---正常table数据
 * 
 * TableData:[{deptId:"",deptName:""}]
 * 
 *TableHeader ---table表头数据配置
 *
 *  TableHeader: [
        { type: "selection" },  ==》多选框配置
        { prop: "deptId", label: "部门id" },
        { prop: "deptName", label: "部门名称" },
        { slot: "opt" }    ==》插槽配置
      ],

 *TableTree --- 配置table树属性
 *  TableTree: {
            "row-key": "deptId",  ==>table树id
            border: true,  表格线
            "default-expand-all": true, ==>table树是否全部展开
            "tree-props": { children: "children", hasChildren: "hasChildren" },
            "show-overflow-tooltip":true  ==>内容过长隐藏
          }
 */
export default {
  name: "Table",
  props: ["TableData", "TableHeader", "TableTree"],
  data() {
    return {
      selectedId: []
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.$parent.handleSelectionChange(val);
    }
  }
};
</script>

<style>
.com_table {
  width: 100%;
  height: 100%;
}
</style>

使用

import Table from "@/components/Table/Table";

<Table :TableData="mnueTree" :TableHeader="TableHeader" :TableTree="TableTree"/>

效果图