Element el-table 二次封装

table组件 commonTable.vue

<template>
  <div class="table-common">
    <el-table
      ref="multipleTable"
      v-loading="showLoading"
      element-loading-text
      element-loading-background="rgba(255, 255, 255, 0.7)"
      :data="tableData"
      :border="border"
      style="width: 100%"
      :height="height"
      :row-class-name="rowClassName"
      @selection-change="tableColumnChangeSelect"
      @row-click="rowClick"
      :row-key="getRowKey"
      fit
      empty-text
    >
      <!-- 选择 -->
      <!-- 多选 -->
      <el-table-column
        v-if="selectionShow"
        type="selection"
        align="center"
        width="80"
        :selectable="selectable"
        :reserve-selection="true"
      />
      <!-- 单选 -->
      <el-table-column v-if="redioShow" :selectable="selectable" width="50">
        <template slot-scope="scope">
          <el-radio
            v-model="redioVal"
            :label="scope.row"
            @change="tableColumnChangeRadio(scope.row)"
            >&nbsp;
          </el-radio>
        </template>
      </el-table-column>
      <!-- 序号 -->
      <el-table-column v-if="index" type="index" label="序号" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- 数据展示层 -->

      <el-table-column
        v-for="item in tableColumn"
        :key="item.prop"
        :align="item.align ? item.align : 'center'"
        :show-overflow-tooltip="item.tooltip"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :fixed="item.fixed"
        v-show="item.show"
      >
        <!-- 自定义插槽 -->
        <template slot-scope="scope">
          <template v-if="item.slot">
            <slot
              :name="item.prop"
              :row="scope.row"
              :column="scope.column"
              :index="scope.$index"
            />
          </template>
          <template v-else>
            {{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}
          </template>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        v-if="
          operates.hasOwnProperty('list')
            ? operates.list.filter((_x) => _x.show === true).length > 0
            : false
        "
        ref="fixedColumn"
        :align="operates.align || 'right'"
        :label="operates.label || '操作'"
        :fixed="operates.fixed"
        :width="operates.width || '120'"
      >
        <!-- align="left" -->
        <template slot-scope="scope">
          <div class="operate-group">
            <template v-for="(btn, index) in operates.list">
              <span v-if="btn.show" :key="index" class="operate-btn">
                <el-button
                  :key="index"
                  size="small"
                  :type="btn.type || 'text'"
                  :disabled="btn.disabled"
                  @click="btn.methods(scope.row, index)"
                  >{{ btn.label }}</el-button
                >
              </span>
            </template>
          </div>
        </template>
      </el-table-column>
      <template v-if="!showLoading && tableData.length === 0" slot="empty">
        <span>暂无数据</span>
      </template>
    </el-table>
    <common-paging
      v-if="(showTotal && total) || total < 0"
      :total="total"
      :page="pageNum"
      :size="pageSize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
/**
 * @description 封装表格组件
 * @param { Boolean } index 表格序号
 * @param { Boolean } tableLoading 表格节流
 * @param { Array } tableData 数据源
 * @param { Boolean } border 表格边框
 * @param { Array } tableColumns 表格列数据
 * @param { Number } pageNum 页码
 * @param { Number } pageSize 一页几条
 * @param { String } total 总条数
 * @param { Boolean } selectionShow 表格多选  aSelection 值为选中的值 用ref直接可以取到
 * @param { Boolean } redioShow 表格单选
 * @param { Object } operates 操作列 {fixed:操作是否固定列,label:名称（默认操作）,list:[{label:'按钮名称'，type:按钮类型（默认text），methods：点击事件的方法（scope.row,index）}]}
 * @param { Function } handleSizeChange 分页
 * @param { Function } handleCurrentChange 翻页操作
 * @param { Function } selectable 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
 * @param { String || Number} height Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。
 * @param { Boolean } showTotal 是否展示下方分页 默认展示
 * @param { Boolean } show 是否展示列
 * @param { Function } getRowKey 是否跨页选中
 */
import commonPaging"./commonPaging.vue" //分页组件
export default {
  components: {commonPaging},
  props: {
    index: {
      type: Boolean,
      default: true,
    },
    tableLoading: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
    border: {
      type: Boolean,
      default: false,
    },
    tableColumns: {
      type: Array,
      default: function () {
        return [];
      },
    },
    total: {
      type: [Number, String],
      default: 0,
    },
    pageNum: {
      type: [Number, String],
      default: 1,
    },
    pageSize: {
      type: [Number, String],
      default: 5,
    },
    selectionShow: {
      type: Boolean,
      default: false,
    },
    redioShow: {
      type: Boolean,
      default: false,
    },
    operates: {
      type: Object,
      default: function () {
        return {};
      },
    },
    selectable: {
      type: Function,
      default: function () {
        return true;
      },
    },
    height: {
      type: [Number, String],
      default: null,
    },
    showTotal: {
      type: Boolean,
      default: true,
    },
    rowClassName: {
      type: Function,
      default: function () {},
    },
    handleSizeChange: {
      type: Function,
      default: function () {},
    },
    handleCurrentChange: {
      type: Function,
      default: function () {},
    },
    getRowKey: {
      type: Function,
      default: function () {
        return null;
      },
    },
  },
  data() {
    return {
      redioVal: "1",
      showLoading: false,
      aSelection: [],
    };
  },
  computed: {
    /**
     * 处理权限 tableColumns中有show 列不展示
     * 减少v-for和v-if联合使用 而写的方法
     * 从源头去处理数组 减少v-if的操作
     * */
    tableColumn: function () {
      return this.tableColumns.filter((item) => {
        // 传入参数无show 所以 undefined为真
        return item.show || item.show === undefined;
      });
    },
  },
  watch: {
    tableLoading: {
      deep: true,
      handler(nVal, oVal) {
        this.showLoading = nVal;
        if (nVal === oVal) {
          return;
        }
        if (nVal) {
          // 开启loading后 长时间未处理 去除loading
          setTimeout(() => {
            this.showLoading = false;
          }, 20000);
        }
      },
    },
  },
  mounted() {},
  methods: {
    /**
     * 表格点击行方法
     * row 行
     * column 列
     * event 事件
     * */
    rowClick(row, column, event) {
      this.$emit("row-click", row, column, event);
    },
    // 表格多选选中方法
    tableColumnChangeSelect(val) {
      this.aSelection = JSON.parse(JSON.stringify(val));
      this.$emit("tableColumnChangeSelect", val);
    },
    // 表格单选选中方法
    tableColumnChangeRadio(val) {
      this.redioVal = val; //单选事件赋值
      this.$emit("tableColumnChangeRadio", val);
    },
  },
};
</script>

<style scoped>
.operate-group {
  display: flex;
  justify-content: space-evenly;
}
</style>

分页组件 commonPaging.vue

<template>
  <div>
    <el-pagination
      v-show="handleSizeChange && handleCurrentChange && total"
      ref="pagination"
      :class="[colors, 'pagination']"
      background
      :current-page="pagingPage"
      :page-size="pagingSize"
      :pager-count="5"
      :page-sizes="[5, 10, 20]"
      layout="total, slot, sizes, jumper, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
/**
 * @description 封装分页操作
 * @param { Number } total 总条数
 * @param { Number } page 页码
 * @param { Number } size 一页几条
 * @param { String } total 总条数
 * @param { String } palte 主题色 用来兼容不同板块不同主题 默认绿色
 */
export default {
  props: {
    page: {
      type: Number,
      default: 1,
    },
    size: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 10,
    },
    palte: {
      type: String,
      default: "defalut",
      validator: function (value) {
        return ["bill", "fund", "interbank", "defalut"].indexOf(value) !== -1;
      },
    },
  },
  data() {
    return {
      pagingPage: 1,
      pagingSize: 10,
    };
  },
  computed: {
    // 计算属性计算颜色
    colors: function () {
      var themeClass = "";
      if (this.palte === "bill") {
        themeClass = "pager-bill";
      } else if (this.palte === "fund") {
        themeClass = "pager-fund";
      } else if (this.palte === "interbank") {
        themeClass = "pager-interbank";
      } else {
        themeClass = "pager-defalut";
      }
      return themeClass;
    },
  },
  watch: {
    page: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);

        this.pagingPage = newVal;
      },
    },
    size: {
      immediate: true,
      handler(newVal, oldVal) {
        this.pagingSize = newVal;
      },
    },
  },
  mounted() {
    this.domOper();
  },
  methods: {
    /**
     * 操作dom 用来更改分页文案
     * 操作dom 用来通过不同模块更改不同主题色
     * */
    domOper() {
      // 更改ui文案
      const jumper = document.getElementsByClassName("el-pagination__jump");
      jumper[0].childNodes[0].nodeValue = "第";
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
  },
};
</script>

table父级引用文件 demo.vue

<template>
  <div>
    <commonTable
      :total="total"
      :handle-current-change="handleCurrentChange"
      :handle-size-change="handleSizeChange"
      :table-data="tableData"
      :table-columns="tableColumns"
      :selection-show="true"
      :redio-show="false"
      :operates="operates"
      @tableColumnChangeSelect="tableColumnChangeSelect"
      :getRowKey="(row) => row.id"
    >
      <template #ecifCustNo="scope">
        <div>{{ scope.row.ecifCustNo }}</div>
      </template>
    </commonTable>
  </div>
</template>

<script>
import { tables } from "./index"; //表头展示项及表头配置
import commonTable from "./commonTable.vue" //子组件
export default {
  components: {commonTable},
  data() {
    return {
      tableData: [
        {
          ecifCustNo: "00006279179260",
          limitNo: "ZHED000062791792600002",
          custName: "北京蓝图******有限公司"
        },
      ],
      total: 1,
      size: 10,
      page: 1,
      tableColumns: [], //表头展示项及表头配置
      operates: {
        //操作栏
        label:"工具栏",//默认为操作
        fixed: "right", //是否固定 * [string, boolean] => true, false, left, right
        align: "center", //	对齐方式 * left, center, right
        list: [
          {
            label: "删除",
            show: true, //是否显示该按钮 * true, false
            disabled:true,
            type: "danger", //按钮类型 * 默认 text
            methods: (row, index) => {
              //按钮绑定的function
              this.tableRemove(row, index);
            },
          },
          {
            label: "修改",
            show: true,
            disabled:false,
            type: "warning",
            methods: (row, index) => {
              this.tableEdit(row, index);
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.tableColumns = tables;
  },
  methods: {
    handleSizeChange(val) {
      console.log(val);
      this.size = val;
    },
    handleCurrentChange(val) {
      console.log(val);
      this.page = val;
    },
    tableRemove(val, i) {
      console.log(val, i);
    },
    tableEdit(val, i) {
      console.log(val, i);
    },
    tableColumnChangeSelect(list) {
      console.log(list);
    },
  },
};
</script>

table父级表头配置文件 index.js

export const tables = [
  {
    prop: 'ecifCustNo',
    label: '客户编号',
    tooltip:true,//内容过长被隐藏时显示
    width:"100px",
    fixed:false,//是否固定 * [string, boolean] => true, false, left, right
    slot:true,//是否使用插槽
    show:false,//是否隐藏当前列
  },
  {
    prop: 'limitNo',
    label: '额度编号',
  },
  {
    prop: 'custName',
    label: '客户名称'
  }
]