基于 Element 表格组件进行二次封装支持表格拖动排序

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

首先来看张截图

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

<template>
  <div class="container">
    <!-- 参数配置请看组件的 `props` 部分  -->
    <my-eltable
      ref="table"
      id="printTable"
      :fit="true"
      :size="'small'"
      :isShow="isShow"
      :loading="loading"
      :dragTable="true"
      :rowDragTable="false"
      :colDragTable="false"
      :tableData="tableData"
      :tabheight="tabheight"
      :tableHeader="tableHeader"
      @rowClick="rowClick"
      @rowDblclick="rowDblclick"
      @dragTableData="dragRowTableData"
      @dragColTableData="dragColTableData"
      @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: [],
      // 表格数据
      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() {
    var array = [
      { prop: "Name", label: "卡号" },
      { prop: "LabelType", label: "标签类型" },
      { prop: "ObjectType", label: "对象类型" },
      { prop: "ObjectValue", label: "对象值" },
      // 如果后端传过来的值不是我们所预期的，此处可以如下格式化，isTag是否需要渲染为el-tag
      {
        isTag: true,
        prop: "Enable",
        label: "是否启用",
        formatter: function (val) {
          return val === true ? "启用" : "禁用";
        },
      },
      {
        isTag: true,
        prop: "Protect",
        label: "是否设防",
        formatter: 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 },
        ]
      }
    ]
    this.tableHeader = array
  },
  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) {
      
    },
    // 表格行拖动排序后的数据, 一般要请求接口保存到后台
    dragRowTableData(data) {
      
    },
    // 表格列拖动排序后的数据, 一般要请求接口保存到后台
    dragColTableData(data) {
      
    },
  },
  destroyed() {},
};
</script>

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

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

在使用之前你需要安装相关插件

npm install sortablejs --save

<template>
  <div class="container">
    <!-- 
      fit: 列的宽度是否自撑开;
      border: 是否带有纵向边框;
      stripe: 是否为斑马纹 table;
      highlight-current-row: 是否要高亮当前行;
    -->
    <el-table
      fit
      border
      stripe
      size="size"
      row-key="id"
      :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: 操作列点击事件
        formatter: 格式化内容
      -->
      <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">
          <!-- formatData: 自定义过滤器 -->
          <div v-if="!th.operate">
            <span v-if="!th.formatter">{{ 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] | formatData(th.formatter, 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>
import Sortable from 'sortablejs';

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",
    },
    rowDragTable: {
      // 行拖拽
      type: Boolean,
      default: false
    },
    colDragTable: {
      // 列拖拽
      type: Boolean,
      default: false
    },
    dragTable: {
      // 表格拖拽，为true支持行/列拖拽
      type: Boolean,
      default: false
    },
    loading: {
      // 加载等待
      type: Boolean,
      default: false,
    },
    isShow: {
      // 是否显示复选框
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {
    // 在模板渲染成html完成后调用，不然会报错 `el` must be an HTMLElement
    if(this.rowDragTable === true) return this.rowDrop();
    if(this.colDragTable === true) return this.columnDrop();
    if(this.dragTable === true) {
      this.rowDrop();
      this.columnDrop();
    }
  },
  watch: {},
  filters: {
    /**
     * val: 格式化的值
     * cb:  格式化函数
     */
    formatData(val, cb) {
      return cb(val);
    },
  },
  methods: {
    // 行拖拽
    rowDrop () {
      // 此时找到的元素是要拖拽元素的父容器
      const tbody = document.querySelector('.el-table__body-wrapper tbody');
      const _this = this;
      Sortable.create(tbody, {
      // 指定父元素下可被拖拽的子元素
      draggable: ".el-table__row",
        onEnd ({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
          _this.$emit('dragTableData', _this.tableData)
        }
      });
    },
    // 列拖拽
    columnDrop () {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.tableHeader[evt.oldIndex];
          this.tableHeader.splice(evt.oldIndex, 1);
          this.tableHeader.splice(evt.newIndex, 0, oldItem);
          this.$emit('dragColTableData', this.tableHeader)
        }
      });
    },
    // 单击当前行获取该行数据
    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">
::v-deep .el-table__body-wrapper {
  height: 100% !important;
}
</style>