关于前端:记录Element表格二次封装

公共表格封装

<template>  <el-table :data="datas" :span-method="spanMethod" @selection-change="select" :default-sort="sort" stripe>    <template v-for="(config, index) in config">      <slot v-if="config.slot" :name="config.slot"></slot>      <el-table-column        v-bind="config"        :resizable="false"        :key="index"        height="20"      ></el-table-column>    </template>  </el-table></template><script>export default {  name: "mergeTable",  props: {    datas: {//数据      type: Array,      required: true,      default: () => [],    },    config: {//表头      type: Array,      required: true,      default: () => [],    },    mergeKeys: {//合并      type: Array,      default: () => [],    },    select:{//多选      type:Function,      default:()=>{}    },    sort:{//排序      type:Object,      default:()=>{}    }  },  data() {    return {      mergeData: {},      mergePos: {},    };  },  mounted() {    this.getSpanArr(this.datas, this.mergeKeys);  },  methods: {    getSpanArr(tableData, keyName) {      const [mergeData, mergePos] = [this.mergeData, this.mergePos];      keyName.forEach((kitem) => {        tableData.forEach((data, i) => {          if (i === 0) {            mergeData[kitem] = mergeData[kitem] || [];            mergeData[kitem].push(1);            mergePos[kitem] = 0;          } else {            if (data[kitem] === tableData[i - 1][kitem]) {              mergeData[kitem][mergePos[kitem]] += 1;              mergeData[kitem].push(0);            } else {              mergeData[kitem].push(1);              mergePos[kitem] = i;            }          }        });      });    },    spanMethod({ row, column, rowIndex, columnIndex }) {      if (this.mergeKeys.includes(column.property)) {        const _row = this.mergeData[column.property][rowIndex];        const _col = _row > 0 ? 1 : 0;        return {          rowspan: _row,          colspan: _col,        };      }    },  },};</script>

组件中应用

<mergeTable         :config="tableConfig"         :datas="list"         :select="handleSelectionChange"         :sort="{prop: 'update_at', order: 'descending'}"      >        <el-table-column slot="select" type="selection" width="50" align="center" />        <el-table-column slot="name" label="名称" align="center">          <template slot-scope="{ row }"></template>        </el-table-column>        <el-table-column slot="owner" label="运维负责人" align="center">          <template slot-scope="{ row }"></template>        </el-table-column>      </mergeTable>data(){    return    {        tableConfig:[          { prop: "select", slot: "select" },          { prop: "name", slot: "name" },          { prop: "business", slot: "business" },          { prop: "developer", slot: "developer" },          { prop: "owner", slot: "owner" },          { prop: "tester", slot: "tester" },          { prop: "update_at", label: "最近拜访", sortable:"sortable",align: "center" },      ]     }}