sortable.js

el-table-colimn prop="tableOptions[0].prop"

data{

return{

tableOptions:[

        {label:'规则编码',prop:'ruleCode'},

        {label:'规则名称',prop:'ruleName'},

        {label:'包装级数',prop:'packageNum'},

        {label:'包装比例',prop:'packageRatio'}

      ],

}

}

mounted(){

    this.columnDrop()

  },

 methods: {

// 列拖拽

      columnDrop() {

        const theader = document.querySelector('.el-table__header-wrapper tr');

        let that = this;

        that.sortable = Sortable.create(theader, {

          draggable: '.drag', // 允许拖拽的类名

          animation: 180,

          delay: 0,

          onEnd({ newIndex, oldIndex }) {

            // if ((that.indexColumn && !that.selectionColumn) || (!that.indexColumn && that.selectionColumn)) {

              // 只存在序号列或复选列

              const oldItem = that.tableOptions[oldIndex - 1];

              that.tableOptions.splice(oldIndex - 1, 1);

              that.tableOptions.splice(newIndex - 1, 0, oldItem);

            // }

  

            // if (that.indexColumn && that.selectionColumn) {

            //   // 存在序号列和复选列

            //   const oldItem = that.dropCol[oldIndex - 2];

            //   that.dropCol.splice(oldIndex - 2, 1);

            //   that.dropCol.splice(newIndex - 2, 0, oldItem);

            // }

            // // debugger;

            // that.$bus.$emit('dragDataChange', that.dropCol);

          }

        });

      },

}