二次封装el-table(配置项封装)

•  me-table组件

 <div class="me-table">
    <el-table ref="table" :border="border" :header-cell-style="{ background: '#E8EFFC', color: '#333333', height: '56px' }" v-loading="tableLoading" :data="detailData" style="width: 100%" @cell-click="taskCodeCell" :row-class-name="tableRowClassName" :row-key="getRowKey">
      <el-table-column v-if="indexType" :type="indexType === true ? 'selection' : indexType" width="55" align="center" :reserve-selection="true" />
      <el-table-column v-for="(item, index) in tableList" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :show-overflow-tooltip="true" :fixed="item.fixed" :align="item.alignTablet ? item.alignTablet : 'center'">
        <template slot="header">
          {{item.label}}
          <slot v-if="item.slotName" :label="item"   name="slot-header" />
        </template>
        <template slot-scope="{ row,$index }">
          <div v-if="item.type == '操作' || item.type == 'slot'">
            <slot :row="row" :label="item" :$index="$index" />
          </div>
          <span v-else>
            <el-tag v-if="item.bgcType" :color="statusSwitch(row.status || row.state)" style="color:#fff">{{
                dicts.dict[item.dicts][row[item.prop]]?.label
            }}</el-tag>
            <span v-else-if="item.dicts && showDict">
              {{ dicts.dict[item.dicts][row[item.prop]]?.label }}
            </span>
            <span v-else-if="getDictLabel(row[item.prop]) == 'boolean'">{{
                item.showState
                  ? row[item.prop]
                    ? item.showState[0]
                    : item.showState[1]
                  : row[item.prop]
                    ? "是"
                    : "否"
            }}</span>
            <span v-else><i class="coursor" v-if="item.prop == 'version'">V</i>{{ getNomalField(row, item) }}</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Dict from "@/components/Dict/Dict";    //请求数据字典
export default {
  name: "Me-table",
  props: {
    //数据字段
    tableList: {
      require: true,
      default: () => [],
      type: Array,
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    border: {
      type: Boolean,
      default: false,
    },
    //数据回显
    detailData: {
      type: Array,
    },
    //是否显示selection
    indexType: {
      type: Boolean | String,
      default: false,
    },
    //加载
    tableLoading: {
      type: Boolean,
    },
  },
  data() {
    return {
      getRowKey(row) {
        return row.id;
      },
      showDict: false,
      dicts: {
        dict: {},
        label: {},
      },
    };
  },
  created() {
    const dictList = this.tableList.reduce((pre, cur) => {
      cur.dicts && pre.push(cur.dicts);
      return pre;
    }, []);
    new Dict(this.dicts).init(dictList, () => {
      this.showDict = true;
    });
  },
  methods: {
    //取消特定表格勾选项
    setCurrentList(value) {
      this.$refs["table"].toggleRowSelection(this.$refs["table"].data.filter((item) => item.code == value)[0], false)
    },
    // 颜色字典
    statusSwitch(status) {
      const bgcState = {
        DONE: '#FFAD54',  
        REFUSE: '#D8D8D8',  
        REBACK: '#43a5fc',  
        COMPLETED: '#13ce66',
        REVIEW_FAILD: '#e17b6b',
        UNDER_APPROVAL: '#03bdf1',
        IN_PROGRESS: '#006900', 
        PROJECT_ISSUED: '#4e4cfd',
        ISSUED_DEPT: '#de66fc', 
        TO_BE_ISSUE: '#ffdb00',
        CHECKING: '#a5f441', 
        IN_REVIEW: '#fc9057', 
        // REVIEW_FAILD:'',
        // REVIEW_FAILD:'',
        // REVIEW_FAILD:'',
        // REVIEW_FAILD:'',

        OUT_STORAGE: '#FFAD54', 
        DEALING: '#D8D8D8', 
        RETURN: '#F28888',  
        ROTATING: '#F8E327', 
        TESTING: '#7FE99A', 
        STORAGE: '#90EFE9', 
        TRANSIT: '#ffffff', 
      }
      return bgcState[status] || ''
    },
    // 点击表格中的事件
    taskCodeCell(row, column, cell) {
      this.$emit("tableClickCallBack", row, column, cell);
    },
    //判断数据是何种类型
    getDictLabel(val) {
      if (typeof val == "boolean") {
        return "boolean";
      } else {
        return val;
      }
    },
    //获取当前选中
    getSelection() {
      return this.$refs["table"].selection;
    },
    //清空当前选中项
    clearSelection() {
      this.$refs["table"].clearSelection();
    },
    getNomalField(row, item) {
      let arr = item.prop.split(".");
      if (arr.length <= 1) {
        return row[item.prop];
      } else {
        return this.recursion(row, arr);
      }
    },
    recursion(row, arr) {
      if (!row) return;
      let key = arr.splice(0, 1);
      if (arr.length > 0) {
        return this.recursion(row[key], arr);
      } else {
        return row[key];
      }
    },
    // 计算表格的隔行变色
    // tableRowClassName({ row, rowIndex }) {
    //   if (rowIndex % 2 == 0) {
    //     return "";
    //   } else {
    //     return "warning-row";
    //   }
    // 单元行背景色
    tableRowClassName({ row, rowIndex }) {
      return row.bgcState;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep {
  .DONE {
    background-color: #ffffff;
  }
  .REBACK {
    background-color: #43a5fc;
  }
  .REFUSE {
    background-color: #d8d8d8;
  }
  .COMPLETED {
    background-color: #43a5fc;
  }
  .IN_REVIEW {
    background-color: #1aa034;
  }
  .APPROACH {
    background-color: #fde509;
  }
  .BEYOND {
    background-color: #ff96a3;
  }
  .discountRate{
    background-color: #ff96a3;
  }
  .discountRateGReen{
    background-color:#b4ffe2;
  }
}
.me-table {
  width: 100%;

  // 去除表格上边框
  ::v-deep .el-table th.is-leaf{
    // height: 0;
    border: none;
  }
  // 去除表格线，除上下边框线以外的所有线
  ::v-deep .el-table__row>td{
    border: none;
  }
  // 去掉表格下边框
  ::v-deep .el-table::before {
    height: 0;
  }
}
// 表格斑马自定义颜色
  ::v-deep .el-table__row.warning-row {
    background: #F2F6FC;
  }
</style>

•  配置项文件

const selectState = [{ label: "是", value: true }, { label: "否", value: false }]
const selectSample = [{ label: "有", value: true }, { label: "无", value: false }]
const tableList = {
  /*
    表格控制字段
    @label: 字段
    @prop: 对应数据
    @type: {
        dicts:字典类型
    }
    @dicts: 字典字段名称
    @eventList:[
        {name: 事件显示名字,callback:回调}
    ] 操作事件
    @bgcType : tag标签颜色项<boolean>
    @alignTablet 表格是否居中
    @width : 宽度<number>
    @fixed : 操作栏浮动方式
  */
a:[{
label:'',
prop:'',
type:'slot'
dicts:'aaa-aaa',
bgcType :true,
alignTablet :left,
width : 300,
fixed : right
}]

• 组件中的应用

<template>
 <!--表格渲染-->
    <div class="table-container">
      <Me-table :tableList="getMtaskListTestingRoomTable" :detailData="[]" :tableLoading="loading">
        <template v-slot="{ row }">
          <el-button type="text" @click="lookBtn(row.id)">查看</el-button>
          <el-button type="text" @click="editBtn(row.id)">编辑</el-button>
          <el-button type="text" @click="deleBtn(row)">删除</el-button>
        </template>
      </Me-table>
      <!--分页组件-->
      <pagination class="table-pagination"/>
    </div>
</template>