el-transfer穿梭框拖拽排序

最新推荐文章于 2024-07-02 10:22:03 发布

层叠样式表广西分表

最新推荐文章于 2024-07-02 10:22:03 发布

阅读量1.1k

点赞数 9

文章标签：前端服务器 javascript

本文链接：https://blog.csdn.net/x_iao_yun/article/details/136150847

版权

本文介绍了如何在使用ElementUI的el-transfer组件时，通过设置weight字段实现数据的同侧拖拽排序，详细展示了节点代码、数据结构和相关函数的实现过程。

摘要由CSDN通过智能技术生成

在使用el-transfer的时候难免会有排序的需求, 这时候就需要对其进行功能的添加, 我现在写的是同侧的拖拽排序, 只是改变了两个数据的顺序, 核心是给一个字段作为排序, 我这里用的字段是weight

节点代码

      <el-transfer
        :render-content="renderFunc"
        v-model="settingValue"
        :data="settingList"
        :titles="['显示的指标', '不显示的指标']"
        :props="{
          key: 'id',
          label: 'label',
        }"
      />

数据代码

settingList: [], // 穿梭框的所有数据
settingValue: [], // 绑定值(勾选中的)
formIndex: -1, // 拖拽的节点索引
formOption: null, // 被替换的节点索引

函数代码

    renderFunc(h, option) {
      let temp = `${option.label}`
      return h('span', {
        on: {
          'dragstart': ($event) => {
            this.formIndex = $event.target.__vue__.option.weight - 1
            this.formOption = $event.target.__vue__.option
          },
          'dragover': ($event) => {
            $event.preventDefault();
            $event.dataTransfer.effectAllowed = "move";

          },
          'drop': ($event) => {
            let sourceIndex = this.formIndex;
            let targetIndex = $event.target.__vue__.option.weight - 1;

            // 交换weight值
            let tempWeight = this.settingList[sourceIndex].weight;
            this.settingList[sourceIndex].weight = this.settingList[targetIndex].weight;
            this.settingList[targetIndex].weight = tempWeight;

            this.subBtnDisable = false
            // 重新排序
            this.settingList.sort((a, b) => a.weight - b.weight);
          }
        },
        attrs: {
          draggable: true
        }
      }, temp)
    },