antdesignvue表格实现伸缩列并限制最大最小宽度和限制操作列不可拖动

antdesignvue表格实现伸缩列并限制最大最小宽度和限制操作

• 先看效果动图：
  

代码部分：

<template>
  <a-table :rowKey="(record,index)=>index" :columns="columns" :components="components" :data-source="tableData" :scroll="{ x: scrollX }">
    <template v-slot:action>
      <a href="javascript:;">Delete</a>
    </template>
  </a-table>
</template>

<script>
import Vue from "vue";
import VueDraggableResizable from "vue-draggable-resizable";
Vue.component("vue-draggable-resizable", VueDraggableResizable);
export default {
  name: "App",
  data() {
    return {
      columns: [
        {
          title: "项目名称",
          dataIndex: "name",
          key: "name",
          width: 150,
          fixed: "left",
          ellipsis: true // 伸缩列过小时省略号显示
        },
        {
          title: "项目类型",
          dataIndex: "type",
          key: "type",
          width: 150,
          ellipsis: true
        },
        {
          title: "项目编号",
          dataIndex: "num",
          key: "num",
          width: 150,
          ellipsis: true
        },
        {
          title: "项目状态",
          dataIndex: "status",
          key: "status",
          width: 100,
          ellipsis: true
        },
        {
          title: "备注1",
          dataIndex: "commet1",
          key: "commet1",
          width: 200,
          ellipsis: true
        },
        {
          title: "备注2",
          dataIndex: "commet2",
          key: "commet2",
          width: 200,
          ellipsis: true
        },
        {
          title: "备注3",
          dataIndex: "commet3",
          key: "commet3",
          width: 200,
          ellipsis: true
        },
        {
          title: "备注4",
          dataIndex: "commet4",
          key: "commet4",
          width: 200,
          ellipsis: true
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          scopedSlots: { customRender: "action" },
          width: 200,
          fixed: "right",
        },
      ],
      tableData: [
        {
          name: "我是项目1111",
          type: "我是项目类型啊啊",
          num: "666-ffffa",
          status: "稳定中",
          commet1: "我是备注啊啊啊啊",
          commet2: "我是备注啊啊啊啊",
          commet3: "我是备注啊啊啊啊",
          commet4: "我是备注啊啊啊啊",
        },
        {
          name: "我是项目1111",
          type: "我是项目类型啊啊",
          num: "666-ffffa",
          status: "稳定中",
          commet1: "我是备注啊啊啊啊",
          commet2: "我是备注啊啊啊啊",
          commet3: "我是备注啊啊啊啊",
          commet4: "我是备注啊啊啊啊",
        },
        {
          name: "我是项目1111",
          type: "我是项目类型啊啊",
          num: "666-ffffa",
          status: "稳定中",
          commet1: "我是备注啊啊啊啊",
          commet2: "我是备注啊啊啊啊",
          commet3: "我是备注啊啊啊啊",
          commet4: "我是备注啊啊啊啊",
        },
      ],
    };
  },
  computed: {
    // 动态获取scrollX,防止数组固定列的大小变化
    scrollX() {
      return this.columns.reduce((preVal, curVal) => {
        return preVal + curVal.width
      }, 0)
    }
  },
  created() {
    this.initDrag(this.columns);
  },
  methods: {
    initDrag(columns) {
      const draggingMap = {};
      columns.forEach((col) => {
        draggingMap[col.key] = col.width;
      });
      const draggingState = Vue.observable(draggingMap);
      // resizeableTitle要小写，不然会有报错
      const resizeableTitle = (h, props, children) => {
        let thDom = null;
        const { key, ...restProps } = props;
        const col = columns.find((col) => {
          const k = col.dataIndex || col.key;
          return k === key;
        });
        // col.key === 'action'限制操作列不可伸缩
        if (!col.width || col.key === 'action') {
          return <th {...restProps}>{children}</th>;
        }
        const onDrag = (x) => {
          draggingState[key] = 0;
          let width = Math.max(x, 100) // 此处100为伸缩时的最小宽度
          width = Math.min(width, 400) // 此处400为伸缩时的最大宽度
          col.width = width 
        };

        const onDragstop = () => {
          draggingState[key] = thDom.getBoundingClientRect().width;
        };
        return (
          <th
            {...restProps}
            v-ant-ref={(r) => (thDom = r)}
            width={draggingState[key]}
            class="resize-table-th"
          >
            {children}
            <vue-draggable-resizable
              key={col.key}
              class="table-draggable-handle"
              w={10}
              x={col.width || draggingState[key]}
              z={1}
              axis="x"
              draggable={true}
              resizable={false}
              onDragging={onDrag}
              onDragstop={onDragstop}
            ></vue-draggable-resizable>
          </th>
        );
      };
      this.components = {
        header: {
          cell: resizeableTitle,
        },
      };
    },
  },
};
</script>
<style lang="less" scoped>
// 这里的deep必须，不然样式无法穿透内部
/deep/.resize-table-th {
  position: relative;
  .table-draggable-handle {
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: 0px;
    cursor: col-resize;
    touch-action: none;
    position: absolute;
    transform: none !important;
    &:hover {
      background: #1890ff;
    }
    &::after {
      content: "|";
      position: absolute;
      top: 15px;
      left: 3px;
      color: #ccc;
    }
  }
}
</style>

下面新增了拖动表头的功能

需要安装sortablejs $ npm install sortablejs --save
代码如下：

<template>
  <div class="box">
    <a-table
      :rowKey="(record, index) => index"
      :columns="columns"
      :components="components"
      :data-source="tableData"
      :scroll="{ x: scrollX, y: 100 }"
    >
      <template v-slot:action>
        <a href="javascript:;">Delete</a>
      </template>
    </a-table>
  </div>
</template>

<script>
import Sortable from 'sortablejs' 
import Vue from "vue";
import VueDraggableResizable from "vue-draggable-resizable";
Vue.component("vue-draggable-resizable", VueDraggableResizable);
export default {
  name: "App",
  data() {
    return {
      columns: [
        {
          title: "项目名称",
          dataIndex: "name",
          key: "name",
          width: 150,
          fixed: "left",
          ellipsis: true, // 伸缩列过小时省略号显示
        },
        {
          title: "项目类型",
          dataIndex: "type",
          key: "type",
          width: 150,
          ellipsis: true,
        },
        {
          title: "项目编号",
          dataIndex: "num",
          key: "num",
          width: 150,
          ellipsis: true,
        },
        {
          title: "项目状态",
          dataIndex: "status",
          key: "status",
          width: 100,
          ellipsis: true,
        },
        {
          title: "备注1",
          dataIndex: "commet1",
          key: "commet1",
          width: 200,
          ellipsis: true,
        },
        {
          title: "备注2",
          dataIndex: "commet2",
          key: "commet2",
          width: 200,
          ellipsis: true,
        },
        {
          title: "备注3",
          dataIndex: "commet3",
          key: "commet3",
          width: 200,
          ellipsis: true,
        },
        {
          title: "备注4",
          dataIndex: "commet4",
          key: "commet4",
          width: 200,
          ellipsis: true,
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          scopedSlots: { customRender: "action" },
          width: 200,
          fixed: "right",
        },
      ],
      tableData: [
        {
          name: "我是项目1111",
          type: "我是项目类型啊啊",
          num: "666-ffffa",
          status: "稳定中",
          commet1: "我是备注啊啊啊啊",
          commet2: "我是备注啊啊啊啊",
          commet3: "我是备注啊啊啊啊",
          commet4: "我是备注啊啊啊啊",
        },
        {
          name: "我是项目1111",
          type: "我是项目类型啊啊",
          num: "666-ffffa",
          status: "稳定中",
          commet1: "我是备注啊啊啊啊",
          commet2: "我是备注啊啊啊啊",
          commet3: "我是备注啊啊啊啊",
          commet4: "我是备注啊啊啊啊",
        },
        {
          name: "我是项目1111",
          type: "我是项目类型啊啊",
          num: "666-ffffa",
          status: "稳定中",
          commet1: "我是备注啊啊啊啊",
          commet2: "我是备注啊啊啊啊",
          commet3: "我是备注啊啊啊啊",
          commet4: "我是备注啊啊啊啊",
        },
      ],
    };
  },
  computed: {
    // 动态获取scrollX,防止数组固定列的大小变化
    scrollX() {
      return this.columns.reduce((preVal, curVal) => {
        return preVal + curVal.width;
      }, 0);
    },
  },
  created() {
    this.initDrag(this.columns);
  },
  mounted() {
    this.columnDrop()
  },
  methods: {
    initDrag(columns) {
      const draggingMap = {};
      columns.forEach((col) => {
        draggingMap[col.key] = col.width;
      });
      const draggingState = Vue.observable(draggingMap);
      const resizeableTitle = (h, props, children) => {
        let thDom = null;
        const { key, ...restProps } = props;
        const col = columns.find((col) => {
          const k = col.dataIndex || col.key;
          return k === key;
        });
        // col.key === 'action'限制操作列不可伸缩
        if (!col.width || col.key === "action") {
          return <th {...restProps}>{children}</th>;
        }
        const onDrag = (x) => {
          draggingState[key] = 0;
          let width = Math.max(x, 100); // 此处100为伸缩时的最小宽度
          width = Math.min(width, 400); // 此处400为伸缩时的最大宽度
          col.width = width;
        };

        const onDragstop = () => {
          draggingState[key] = thDom.getBoundingClientRect().width;
        };
        return (
          <th
            {...restProps}
            v-ant-ref={(r) => (thDom = r)}
            width={draggingState[key]}
            class="resize-table-th"
          >
            {children}
            <vue-draggable-resizable
              key={col.key}
              class="table-draggable-handle"
              w={10}
              x={col.width || draggingState[key]}
              z={1}
              axis="x"
              draggable={true}
              resizable={false}
              onDragging={onDrag}
              onDragstop={onDragstop}
            ></vue-draggable-resizable>
          </th>
        );
      };
      this.components = {
        header: {
          cell: resizeableTitle,
        },
      };
    },
    //列拖拽
    columnDrop() {
      var _this = this;
      const wrapperTr = document.querySelector(".ant-table-wrapper tr");
      this.sortable = Sortable.create(wrapperTr, {
        handle: ".ant-table-header-column", // 防止拉伸时触发拖拽
        animation: 180,
        delay: 0,
        //之前调用onEnd方法会出现表格DOM不更新以及表头对不上的情况所以更换为onUpdate方法
        onUpdate: function (evt) {
          //修改items数据顺序
          var newIndex = evt.newIndex;
          var oldIndex = evt.oldIndex;
          const newItem = wrapperTr.children[newIndex];
          const oldItem = wrapperTr.children[oldIndex];

          // 先删除移动的节点
          wrapperTr.removeChild(newItem);
          // 再插入移动的节点到原有节点，还原了移动的操作
          if (newIndex > oldIndex) {
            wrapperTr.insertBefore(newItem, oldItem);
          } else {
            wrapperTr.insertBefore(newItem, oldItem.nextSibling);
          }
          // 更新items数组
          var item = _this.columns.splice(oldIndex, 1);
          _this.columns.splice(newIndex, 0, item[0]);
          // 下一个tick就会走patch更新

          // 如果需要缓存表头，比如缓存到vuex中
          //每次更新调取保存用户接口
          // _this.saveColumns("columnChange", _this.columns);
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  padding: 20px;
}
/deep/.resize-table-th {
  position: relative;
  .table-draggable-handle {
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: 0px;
    cursor: col-resize;
    touch-action: none;
    position: absolute;
    transform: none !important;
    &:hover {
      background: #1890ff;
    }
    &::after {
      content: "|";
      position: absolute;
      top: 15px;
      left: 3px;
      color: #ccc;
    }
  }
}
</style>

有疑问欢迎一起讨论啊~