vue vue-table列表操作 新增、复制、删除

<template>
  <div>
    <el-table
      :data="tableData"
      ref="singleTable"
      highlight-current-row
      border
      row-key="index"
      class="load_table"
    >
      <el-table-column min-width="100%" label="序号" align="center">
        <template slot-scope="scope"> Step{{scope.$index+1}} </template>
      </el-table-column>
      <el-table-column
        prop="id"
        min-width="100%"
        label="id"
        align="center"
      ></el-table-column>
      <el-table-column
        label="名称"
        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=""
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        min-width="100%"
        label="姓名"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="260" 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-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 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() {
    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);
          
          // let dragId = this.tableData[e.newIndex].index;//拖动行的id
          // let oneId,twoId
          // //拖动行的前一行
          // if( this.tableData[e.newIndex-1]){
          // 	oneId = this.tableData[e.newIndex-1].index;
          // }else {
          // 	oneId = ""
          // }
          // //拖动行的后一行
          // if( this.tableData[e.newIndex+1]){
          // 	twoId = this.tableData[e.newIndex+1].index;}
          // else {
          // 	twoId = ""
          // }
          // console.log("拖动行："+dragId);
          // console.log("前一行："+oneId);
          // console.log("后一行："+twoId);
          //然后就可以发送请求了......
        },
      });
    },

    /**
     * 弹框
     */
    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);
          });
        });
      }
    },

    /**
     * 确认事件
     * @type data Data Mapping 文本字段
     * @type it Dependancy 文本字段
     */
    confirm(type) {
      this.tableData = this.tableData.map(item => {
        if (item.index === this.row.index) {
          return this.row
        }
        return item
      })
      this.TreesShow = false;
    },

    /**
     * 树形选中回调
     */
    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,
          nameCode: this.ruleForm.menuIdsisEditor.join(","),
          nameList: LocationName ? LocationName : "",
        };
    },

    /**
     * 新增
     * @row 当前列
     * @index 索引
     */
    handAdd(row, index) {
      let obj = { id: null, name: "这是新增的", nameList: null, nameCode:null,index: this.tableData.length };
      this.tableData.splice(index + 1, 0, obj);
    },

    /**
     * 删除
     * @row 当前列
     * @index 索引
     */
    handDelete(row, index) {
      this.tableData.splice(index, 1);
    },

    /**
     * 复制
     * @row 当前列
     * @index 索引
     */
    handCopy(row, index) {
      let obj = { ...row };
      const newArr = this.tableData.concat()
      newArr.splice(index + 1, 0, obj);
      this.tableData = newArr.map((item,index) => {
        return {
          ...item,
          index,
        }
      })
    },
  },
};
</script>

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