基于 Element 表格组件进行二次封装

基于 Element 表格组件进行二次封装

首先来看张截图

注：表格列和行支持拖动 去查看

1. 在项目 views 目录下新建表格展示页面

<template>
  <div class="container">
    <my-eltable
      ref="table"
      id="printTable"
      :fit="true"
      :size="'small'"
      :isShow="isShow"
      :loading="loading"
      :tableData="tableData"
      :tabheight="tabheight"
      :tableHeader="tableHeader"
      @rowClick="rowClick"
      @rowDblclick="rowDblclick"
      @selectionChangeHandle="selectionData"
    ></my-eltable>
  </div>
</template>

<script>
// 引入表格组件
import MyEltable from "@/components/commonTable";

export default {
  components: {
    MyEltable,
  },
  data() {
    return {
      // 是否显示复选框
      isShow: true,
      // 加载提示
      loading: false,
      // 表格高度，这里做了自适应高度，一般需要写固定值
      tabheight: "100%",
      // 表头数据
      tableHeader: [
        { prop: "Name", label: "卡号" },
        { prop: "LabelType", label: "标签类型" },
        { prop: "ObjectType", label: "对象类型" },
        { prop: "ObjectValue", label: "对象值" },
        // 如果后端传过来的值不是我们所预期的，此处可以如下格式化，isTag 是否需要渲染为el-tag标签
        { prop: "Enable", label: "是否启用",
          isTag: true,
          formatData: function (val) {
            return val === true ? "启用" : "禁用";
          },
        },
        { prop: "Protect", label: "是否设防",
          isTag: true,
          formatData: function (val) {
            return val === true ? "设防" : "未设防";
          },
        },
        // 表格操作
        {
          prop: 'operate', label: '操作', fixed: 'right', minWidth: '160px', width: '200px',
          operate: [
            { name: '修改', type: 'primary', size: 'small', icon: 'el-icon-edit', clickFun: this.editRowData },
            { name: '删除', type: 'danger', size: 'small', icon: 'el-icon-delete', clickFun: this.deleteRowData }
          ]
        }
      ],
      // 表格数据
      tableData: [
        {
          id: 1,
          Name: '测试数据',
          LabelType: '一般',
          ObjectType: '复杂',
          ObjectValue: '{a: 1}',
          Enable: true,
          Protect: false
        },
        {
          id: 2,
          Name: '测试数据2',
          LabelType: '常用',
          ObjectType: '简单',
          ObjectValue: '{a: 2}',
          Enable: false,
          Protect: true
        },
        {
          id: 3,
          Name: '测试数据3',
          LabelType: '重要',
          ObjectType: '复杂',
          ObjectValue: '{a: 3}',
          Enable: true,
          Protect: false
        },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 编辑
    editRowData(row) {
      console.log("编辑", row);
    },
    // 删除
    deleteRowData(row) {
      console.log("删除", row);
    },
    // 复选 | 全选
    selectionData(value) {
      console.log("复选", value);
    },
    // 单击表格
    rowClick(row, event, column) {

    },
    // 双击表格
    rowDblclick(row, event, column) {

    }
  },
  destroyed() {},
};
</script>

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

2. 在项目的components文件夹下创建表格组件

<template>
  <div class="container">
    <!-- 
      fit: 列的宽度是否自撑开;
      border: 是否带有纵向边框;
      stripe: 是否为斑马纹 table;
      highlight-current-row: 是否要高亮当前行;
    -->
    <el-table
      fit
      border
      stripe
      size="size"
      :data="tableData"
      :height="tabheight"
      v-loading="loading"
      ref="multipleTable"
      highlight-current-row
      @row-click="rowClick"
      @row-dblclick="rowDblclick"
      @selection-change="selectionChangeHandle"
      element-loading-text="正在加载中..."
      element-loading-background="rgba(0, 0, 0, 0.3)"
    >
      <!-- 是否需要多选 由isShow控制 -->
      <el-table-column
        v-if="isShow"
        type="selection"
        align="center"
        fixed
      ></el-table-column>
      <!--
        prop: 字段名
        label: 展示的名称
        fixed: 是否需要固定(left, right)
        minWidth: 设置列的最小宽度(不传默认值),
        operate: 是否有操作列
        operate.name: 操作列字段名称
        btn.clickFun: 操作列点击事件
        formatters: 格式化内容
      -->
      <el-table-column
        v-for="(th, key) in tableHeader"
        :key="key"
        :prop="th.prop"
        :label="th.label"
        :fixed="th.fixed"
        :width="th.width"
        :min-width="th.minWidth"
        align="center"
      >
        <!-- 加入template主要是有操作一栏, 操作一栏的内容是相同的, 数据不是动态获取的，这里操作一栏的名字定死 (operate表示是操作这一列, 否则就不是) -->
        <template slot-scope="scope">
          <!-- formatters: 自定义过滤器 -->
          <div v-if="!th.operate">
            <span v-if="!th.formatData">{{ scope.row[th.prop] }}</span>
            <!--这一块做 el-tag 标签样式判断。不需要可以去除判断 -->
            <span v-else>
              <el-tag
                v-if="th.isTag === true"
                :type="scope.row[th.prop] === true ? 'success' : 'info'"
              >{{ scope.row[th.prop] | formatters(th.formatData, scope.row[th.prop]) }}</el-tag>
            </span>
          </div>
          <div v-else>
            <el-button
              v-for="(btn, key) in th.operate"
              :key="key"
              :size="btn.size"
              :type="btn.type"
              :icon="btn.icon"
              @click="btn.clickFun(scope.row)"
              >{{ btn.name }}
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      // 表格数据
      type: Array,
      default: function () {
        return [];
      },
    },
    tableHeader: {
      // 表格头部数据
      type: Array,
      default: function () {
        return [];
      },
    },
    tabheight: {
      // 表格高度，默认自适应
      type: String,
      default: "100%",
    },
    fit: {
      // 列的宽度是否自撑开
      type: Boolean,
      default: true
    },
    size: {
      // 表格尺寸
      type: String,
      default: 'small'
    },
    loading: {
      // 加载等待
      type: Boolean,
      default: false,
    },
    isShow: {
      // 是否显示复选框
      type: Boolean,
      default: false,
    },
    // rowClick: {
    //   // 单击当前行获取该行数据
    //   type: Function,
    //   default: (row, event, column) => {
    //     this.$emit('rowClick', row, event, column)
    //   },
    // },
    // rowDblclick: {
    //   // 双击当前行获取该行数据
    //   type: Function,
    //   default: (row, event, column) => {
    //     this.$emit('rowDblclick', row, event, column)
    //   },
    // },
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  filters: {
    /**
     * val: 格式化的值
     * cb:  格式化函数
    */ 
    formatters(val, cb) {
      return cb(val);
    },
  },
  methods: {
    // 单击当前行获取该行数据
    rowClick(row, event, column) {
      this.$emit("rowClick", row, event, column);
    },
    // 双击当前行获取该行数据
    rowDblclick(row, event, column) {
      this.$emit("rowDblclick", row, event, column);
    },
    // 获取被选中的复选框行的id
    selectionChangeHandle() {
      let ids = [];
      let data = this.$refs.multipleTable.selection;
      for (let i = 0; i < data.length; i++) {
        ids.push(data[i].id);
      }
      this.$emit("selectionChangeHandle", ids);
    }
  },
  destroyed() {},
};
</script>

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

存在的问题：

表格的下面可能会多出来一条线，看起来不美观，解决办法就是在组件中添加如下样式就OK了。

::v-deep .el-table__body-wrapper {
  height: 100% !important;
}