表格拖拽dome

<template>
  <div>
    <el-table
      :data="tableData"
      ref="singleTable"
      highlight-current-row
      border
      row-key="index"
       :show-header="false"
      class="load_table"
    >
      <el-table-column min-width="100%" label="" align="center">
        <template slot-scope="scope"> Setp {{ scope.$index + 1 }} </template>
      </el-table-column>
      <el-table-column
        prop="id"
        min-width="100%"
        label=""
        align="center"
      ></el-table-column>
      <el-table-column
        prop="nameList"
        min-width="100%"
        align="center"
      >
        <template slot-scope="scope">
          <div @click="tree(scope.row)">
            <el-input
              size="mini"
              type="textarea"
              readonly
              autosize
              v-model="scope.row.nameList"
              placeholder=""
            ></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        min-width="100%"
        align="center"
      ></el-table-column>
      <el-table-column label="Operation" width="300" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-plus"
            @click="handAdd(scope.row, scope.$index)"
            >新增</el-button
          >
          <el-button
            type="text"
            size="small"
            icon="el-icon-top"
            :disabled="scope.$index == 0"
            @click="move(scope.row, scope.$index, 'top')"
            >上移</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="scope.$index == tableData.length-1"
            icon="el-icon-bottom"
            @click="move(scope.row, scope.$index, 'bottom')"
            >下移</el-button
          >

          <el-button
            type="text"
            size="small"
            icon="el-icon-delete"
            :disabled="tableData.length <= 1"
            @click="handDelete(scope.row, scope.$index)"
            >删除</el-button
          >
          <el-button
            type="text"
            size="small"
            icon="el-icon-document-copy"
            @click="handCopy(scope.row, scope.$index)"
            >复制</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 树形选择 -->
    <el-dialog
      title="选择"
      class="selectModal"
      v-if="TreesShow"
      :visible.sync="TreesShow"
      :close-on-click-modal="false"
      width="30%"
    >
      <div class="treeList">
        <el-tree
          :data="dependancyItTree"
          ref="dataTrees"
          node-key="Code"
          show-checkbox
          default-expand-all
          :props="defaultProps"
          :expand-on-click-node="false"
          highlight-current
          @check="getCurrentNode"
        >
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="TreesShow = false" size="small">取消</el-button>
        <el-button type="primary" @click="confirm" size="small">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import VueDragResize from "vue-drag-resize";
import Sortable from "sortablejs";

export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: "123",
          nameList: null,
          nameCode: null,
        },
        {
          id: 2,
          name: "张三",
          nameList: null,
          nameCode: null,
        },
        {
          id: 3,
          name: "张三",
          nameList: null,
          nameCode: null,
        },
        {
          id: 4,
          name: "张三",
          nameList: null,
          nameCode: null,
        },
        {
          id: 6,
          name: "张三",
          nameList: null,
          nameCode: null,
        },
        {
          id: 7,
          name: "张三",
          nameList: null,
          nameCode: null,
        },
      ],
      TreesShow: false,
      row: {},
      ruleForm: {
        menuIdsisEditor: null,
      },
      dependancyItTree: [
        {
          Children: [
            {
              Children: [
                {
                  Children: [],
                  Code: "2111011043270072",
                  AddTime: "2021-11-01 10:43:27",
                  AddUser: "SYSTEM",
                  UpdateTime: "2021-11-01 10:43:27",
                  DeleteState: 0,
                  Modifier: "SYSTEM",
                  LocationName: "BO-001 Company Code",
                  ParentCode: "2111011043270070",
                  NodeIndex: 3,
                  IsLastNode: 1,
                  NodeSort: 0,
                  DataDomain: "Legal Data",
                  DataCategory: "Reference Master Data",
                },
                {
                  Children: [],
                  Code: "2111011043270078",
                  AddTime: "2021-11-01 10:43:27",
                  AddUser: "SYSTEM",
                  UpdateTime: "2021-11-01 10:43:27",
                  DeleteState: 0,
                  Modifier: "SYSTEM",
                  LocationName: "BO-002 G/L Account Master",
                  ParentCode: "2111011043270070",
                  NodeIndex: 3,
                  IsLastNode: 1,
                  NodeSort: 0,
                  DataDomain: "Legal Data",
                  DataCategory: "Operation Master Data",
                },
                {
                  Children: [],
                  Code: "2111011043270084",
                  AddTime: "2021-11-01 10:43:27",
                  AddUser: "SYSTEM",
                  UpdateTime: "2021-11-01 10:43:27",
                  DeleteState: 0,
                  Modifier: "SYSTEM",
                  LocationName: "BO-003 Inspection Plan",
                  ParentCode: "2111011043270070",
                  NodeIndex: 3,
                  IsLastNode: 1,
                  NodeSort: 0,
                  DataDomain: "Quality Data",
                  DataCategory: "Transaction Data",
                },
                {
                  Children: [],
                  Code: "2111011043270090",
                  AddTime: "2021-11-01 10:43:27",
                  AddUser: "SYSTEM",
                  UpdateTime: "2021-11-01 10:43:27",
                  DeleteState: 0,
                  Modifier: "SYSTEM",
                  LocationName: "BO-004 MM Schedule Lines",
                  ParentCode: "2111011043270070",
                  NodeIndex: 3,
                  IsLastNode: 1,
                  NodeSort: 0,
                  DataDomain: "Logistic Data",
                  DataCategory: "Transaction Data",
                },
                {
                  Children: [],
                  Code: "2111011043270096",
                  AddTime: "2021-11-01 10:43:27",
                  AddUser: "SYSTEM",
                  UpdateTime: "2021-11-01 10:43:27",
                  DeleteState: 0,
                  Modifier: "SYSTEM",
                  LocationName: "BO-005 Vendor Master",
                  ParentCode: "2111011043270070",
                  NodeIndex: 3,
                  IsLastNode: 1,
                  NodeSort: 0,
                  DataDomain: "Purchasing Data",
                  DataCategory: "Operation Master Data",
                },
                {
                  Children: [],
                  Code: "2111011043270102",
                  AddTime: "2021-11-01 10:43:27",
                  AddUser: "SYSTEM",
                  UpdateTime: "2021-11-01 10:43:27",
                  DeleteState: 0,
                  Modifier: "SYSTEM",
                  LocationName: "BO-006 Material Master Data",
                  ParentCode: "2111011043270070",
                  NodeIndex: 3,
                  IsLastNode: 1,
                  NodeSort: 0,
                  DataDomain: "Product Data",
                  DataCategory: "Operation Master Data",
                },
                {
                  Children: [],
                  Code: "2111011043270108",
                  AddTime: "2021-11-01 10:43:27",
                  AddUser: "SYSTEM",
                  UpdateTime: "2021-11-01 10:43:27",
                  DeleteState: 0,
                  Modifier: "SYSTEM",
                  LocationName: "BO-007 Customer Demand",
                  ParentCode: "2111011043270070",
                  NodeIndex: 3,
                  IsLastNode: 1,
                  NodeSort: 0,
                  DataDomain: "Business Partner Data",
                  DataCategory: "Transaction Data",
                },
                {
                  Children: [],
                  Code: "2111011043270114",
                  AddTime: "2021-11-01 10:43:27",
                  AddUser: "SYSTEM",
                  UpdateTime: "2021-11-01 10:43:27",
                  DeleteState: 0,
                  Modifier: "SYSTEM",
                  LocationName: "BO-008 Customer Master Data",
                  ParentCode: "2111011043270070",
                  NodeIndex: 3,
                  IsLastNode: 1,
                  NodeSort: 0,
                  DataDomain: "Sales Data",
                  DataCategory: "Operation Master Data",
                },
                {
                  Children: [],
                  Code: "2111011043270120",
                  AddTime: "2021-11-01 10:43:27",
                  AddUser: "SYSTEM",
                  UpdateTime: "2021-11-01 10:43:27",
                  DeleteState: 0,
                  Modifier: "SYSTEM",
                  LocationName: "BO-009 Production Order",
                  ParentCode: "2111011043270070",
                  NodeIndex: 3,
                  IsLastNode: 1,
                  NodeSort: 0,
                  DataDomain: "Manufacturing Data",
                  DataCategory: "Transaction Data",
                },
                {
                  Children: [],
                  Code: "2111011043270126",
                  AddTime: "2021-11-01 10:43:27",
                  AddUser: "SYSTEM",
                  UpdateTime: "2021-11-01 10:43:27",
                  DeleteState: 0,
                  Modifier: "SYSTEM",
                  LocationName: "BO-010 Bill of Material",
                  ParentCode: "2111011043270070",
                  NodeIndex: 3,
                  IsLastNode: 1,
                  NodeSort: 0,
                  DataDomain: "Engineering Data",
                  DataCategory: "Transaction Data",
                },
                {
                  Children: [],
                  Code: "2111011043270132",
                  AddTime: "2021-11-01 10:43:27",
                  AddUser: "SYSTEM",
                  UpdateTime: "2021-11-01 10:43:27",
                  DeleteState: 0,
                  Modifier: "SYSTEM",
                  LocationName: "BO-011 WBS element",
                  ParentCode: "2111011043270070",
                  NodeIndex: 3,
                  IsLastNode: 1,
                  NodeSort: 0,
                  DataDomain: "Project Management Data",
                  DataCategory: "Transaction Data",
                },
                {
                  Children: [],
                  Code: "2111011043270138",
                  AddTime: "2021-11-01 10:43:27",
                  AddUser: "SYSTEM",
                  UpdateTime: "2021-11-01 10:43:27",
                  DeleteState: 0,
                  Modifier: "SYSTEM",
                  LocationName: "BO-012 Personnel Number",
                  ParentCode: "2111011043270070",
                  NodeIndex: 3,
                  IsLastNode: 1,
                  NodeSort: 0,
                  DataDomain: "HR Data",
                  DataCategory: "Transaction Data",
                },
              ],
              Code: "2111011043270070",
              AddTime: "2021-11-01 10:43:27",
              AddUser: "SYSTEM",
              UpdateTime: "2021-11-03 16:10:57",
              DeleteState: 0,
              Modifier: "CAL3CNG",
              LocationName: "2570",
              ParentCode: "2111011043270069",
              NodeIndex: 2,
              IsLastNode: 0,
              NodeSort: 0,
              DataDomain: "",
              DataCategory: "",
            },
          ],
          Code: "2111011043270069",
          AddTime: "2021-11-01 10:43:27",
          AddUser: "SYSTEM",
          UpdateTime: "2021-11-01 10:43:27",
          DeleteState: 0,
          Modifier: "SYSTEM",
          LocationName: "RBCC",
          ParentCode: "0",
          NodeIndex: 1,
          IsLastNode: 0,
          NodeSort: 0,
          DataDomain: null,
          DataCategory: null,
        },
      ],
      defaultProps: {
        children: "Children",
        label: "LocationName",
      },
    };
  },
  components: {},
  mounted() {

    // 1.vue列表拖拽
      // 1.1 问题索引不刷新问题
      
             // 解决问题: 给表格添加索引 row-key="index"

      // 1.2 索引重复问题(只要删除一个新增就会有索引重复问题)

            //  解决问题: 给删除时索引重新改变

        // 1.3注意事项:
          //  1.3.1 新增/复制索引都需要去数组的长度这样会避免索引不会重复或则没有索引


    // 默认给所有数据添加索引
    this.tableData = this.tableData.map((item, i) => {
      return {
        id: item.id,
        name: item.name,
        index: i,
      };
    });

    // 列表拖拽
    this.dragSort();
  },
  methods: {
    // 表格拖动排序
    dragSort() {
      const el = this.$refs.singleTable.$el.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      this.sortable = Sortable.create(el, {
        onEnd: (e) => {
          // onEnd是结束拖拽时触发，onUpdate是列表内元素顺序更新的时候触发，更多请看文末配置项
          // e.oldIndex为拖动一行原来的位置，e.newIndex为拖动后新的位置
          const targetRow = this.tableData.splice(e.oldIndex, 1)[0];
          this.tableData.splice(e.newIndex, 0, targetRow);
        },
      });
    },

    /**
     * 弹框
     * @row 当前列
     */
    tree(row) {
      this.TreesShow = true;

      // 把当前对象取出来
      this.row = row;

      if (row.nameCode) {
        // 通过,分割
        let arrCode = row.nameCode.split(",");
        // 级联默认选中
        this.$nextTick(function () {
          arrCode.forEach((item) => {
            // 设置默认选中
            this.$refs.dataTrees.setChecked(item, true, false);
          });
        });
      }
    },

    /**
     * 确认事件
     */
    confirm() {
      // 查找index 给row重新赋值，赋值为级联选中数据
      this.tableData = this.tableData.map(item => {
        if (item.index === this.row.index) {
          return this.row
        }
        return item
      })
      // 关闭弹框
      this.TreesShow = false;
    },

    /**
     * 树形选中回调
     * @SelectedObj 选中数据集合
     */
    getCurrentNode(nodeObj, SelectedObj) {
      let LocationName = [];
      if (SelectedObj.checkedNodes) {
        // 通过;拼接
        LocationName = SelectedObj.checkedNodes
          .map((item) => item.LocationName)
          .join(";");
      }
      // 获取级联选中的数据
      this.ruleForm.menuIdsisEditor = this.$refs.dataTrees
        .getCheckedKeys()
        .concat(this.$refs.dataTrees.getHalfCheckedKeys());
       
      this.row = {
        ...this.row,
        // 选中数据code通过,拼接
        nameCode: this.ruleForm.menuIdsisEditor.join(","),
        // 选中数据的名称
        nameList: LocationName ? LocationName : "",
      };
    },

    /**
     * 新增
     * @row 当前列
     * @index 索引
     */
    handAdd(row, index) {
      // index索引需要取数组长度
      let obj = {
        id: null,
        name: "这是新增的",
        nameList: null,
        index:this.tableData.length
      };
      // 往当前对象后面增加一列
      this.tableData.splice(index + 1, 0, obj);

    },

    /**
     * 删除
     * @row 当前列
     * @indexs 索引
     */
    handDelete(row, indexs) {
      this.tableData.splice(indexs, 1);
      // 索引重复生成解决index重复报错问题
      this.tableData.map((item,i)=> {
        return {
          ...item,
          index:i
        }
      })
    },

    /**
     * 复制
     * @row 当前列
     * @index 索引
     */
    handCopy(row, index) {
      // index索引需要取数组长度
      let obj = { ...row,index:this.tableData.length};
      // 往当前对象后面增加一列
      this.tableData.splice(index+1,0,obj)

      // 数组重新拼接在对象后面
      // const newArr = this.tableData.concat();
      // newArr.splice(index + 1, 0, obj);
      // this.tableData = newArr.map((item, index) => {
      //   return {
      //     ...item,
      //     index,
      //   };
      // });
    },


    /**
     * 上移/下移事件
     * @row 当前
     * @index 索引
     * @type top上移/bottom下移类型
     */
    move(row, index, type) {
      if (type == "top") {
        if (index != 0) {
          this.tableData[index] = this.tableData.splice(
            index - 1,
            1,
            this.tableData[index]
          )[0];
        } else {
          this.tableData.push(this.tableData.shift());
        }
      } else {
        if (index != this.tableData.length - 1) {
          this.tableData[index] = this.tableData.splice(
            index + 1,
            1,
            this.tableData[index]
          )[0];
        } else {
          this.tableData.unshift(this.tableData.splice(index, 1)[0]);
        }
      }
    },
  },
};
</script>

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