需求：vue+element-ui+sortable.js表格行和列拖拽(宽度自定义)

一、效果图

二、代码实现

注：需要安装依赖  pnpm i sortablejs -S

<template>
  <div style="padding: 15px">
    <h3 style="text-align: left; padding: 10px; background: #ccc">
      vue+element-ui+sortable.js表格行和列拖拽
    </h3>
    <!-- 属性border可实现单元格拖拽获得字段宽度的改变--`@header-dragend`具体参考官网的方法 -->
    <el-table
      ref="dataTable"
      :data="customColumnList"
      class="customer-table"
      border
      row-key="id"
      align="left"
      @select="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        :selectable="checkSelectable"
        align="center"
        width="55"
      ></el-table-column>
      <el-table-column prop="label" label="字段名" width="180">
        <template slot-scope="scope">
          {{ scope.row.label }}
        </template>
      </el-table-column>
      <el-table-column prop="width" label="宽度" width="180">
        <template slot-scope="scope">
          <div class="right-box">
            <p style="padding-right: 5px">宽度</p>
            <el-input
              style="width: 60px"
              size="mini"
              type="text"
              v-model="scope.row.width"
              @keyup.enter.native="this.rowDrop()"
            ></el-input>
            <p style="padding-left: 5px">px</p>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

 

<script>
import Sortable from "sortablejs";
export default {
  name: "login",
  data() {
    return {
      customColumnList: [
        {
          id: 1,
          label: "linger1",
          width: "220",
        },
        {
          id: 2,
          label: "linger2",
          resizable: false,
          width: "70",
        },
        {
          id: 3,
          label: "linger3",
          width: "150",
        },
        {
          id: 4,
          label: "linger4",
          width: "120",
          resizable: false,
        },
        {
          id: 5,
          label: "linger5",
          width: "200",
          resizable: false,
        },
      ],
      hasSelectList: [1, 5, 2],
    };
  },
  mounted() {
    this.getTableData();
    this.rowDrop();
  },
  methods: {
    getTableData() {
      // 默认选中
      this.$nextTick(() => {
        this.customColumnList.forEach((row) => {
          if (this.hasSelectList.indexOf(row.id) >= 0) {
            this.$refs.dataTable.toggleRowSelection(row, true);
          }
        });
      });
    },
    // 监听复选框的选择
    handleSelectionChange(section) {
      this.hasSelectList = section.map((item) => item.id);
      const List = this.customColumnList.filter((item) =>
        section.map((items) => items.id).some((_item) => item.id === _item)
      );
      // 排序后的列表
      console.log(List);
      // console.log(this.hasSelectList);
    },
    // 设置失效的行数id=5不可勾选
    checkSelectable(row) {
      if (row.id !== 5) {
        return true
        }
    },
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.customColumnList.splice(oldIndex, 1)[0];
          _this.customColumnList.splice(newIndex, 0, currRow);
          console.log(_this.customColumnList);
        },
      });
      console.log(_this.customColumnList);
    },
    //列拖拽
    // columnDrop() {
    //   const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
    //   console.log("wrapperTr:", wrapperTr);
    //   this.sortable = Sortable.create(wrapperTr, {
    //     animation: 180,
    //     delay: 0,
    //     handle: ".move", // 只有带move类名的元素才能拖动,多选框禁止拖动
    //     onEnd: (evt) => {
    //       // 因为手动加了一个多选框, 不在表头循环数组内, 所以这里减1
    //       let oldIndx = evt.oldIndex - 1;
    //       let newIndx = evt.newIndex - 1;
    //       const oldItem = this.dropCol[oldIndx];
    //       // 真正改变列数据--变化列头，就能实现列拖动 列数据按列头索引取值 {{ scope.row[dropCol[index].prop] }}
    //       this.dropCol.splice(oldIndx, 1); // 删除旧一行 删除为1
    //       this.dropCol.splice(newIndx, 0, oldItem); // 插入新一行 插入为0
    //     },
    //   });
    // },
  },
};
</script>

 

<style scoped>
.right-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<style>
/* 取消单元格的列的border */
.el-table--border .el-table__cell {
  border: none;
}
.el-table--border,
.el-table--group {
  border: none;
}
/* 去掉表格单元格边框 */
/* 头部边框设置 */
/*  表格最外边框 */
.el-table--border, .el-table--group {
  border: none;
}
.customer-table thead tr th.is-leaf{
  border: 1px solid #EBEEF5;
  border-right: none;
}
.customer-table thead tr th:nth-last-of-type(2){
  border-right: 1px solid #EBEEF5;
}
</style>