element-ui+vue实现表格动态添加表格行，并且可以进行上下移动

element-ui+vue实现表格动态添加表格行，并且可以进行上下移动

• 由于项目需求，我所实现的是表格可以添加多个，并且每一个表格内的表格行也可以进行动态添加
  下面是代码的实现
  html代码部分：

   <draggable v-model="formInline.addFormArr"
                   chosenClass="chosen"
                   forceFallback="true"
                   group="people"
                   animation="1000"
                   @start="onStart"
                   @end="onEnd">
          <div class="add-from"
               v-for="(domain,index) in formInline.addFormArr"
               :key="domain.key">
 <el-row>
                <el-col :span="24">
                  <el-form-item label="数据验证
                                :"
                                :label-width="formLabelWidth">

                    <el-table :data="domain.arr"
                              :border=true
                              style="width: 99.99%;">
                      <el-table-column type="index"
                                       label="序号"
                                       width="50">el-table-column>
                      <el-table-column prop=""
                                       label="参数"
                                       width="330">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.name"
                                    autocomplete="off"
                                    size="small"
                                    placeholder="">el-input>
                        template>
                      el-table-column>
                      <el-table-column prop=""
                                       label="条件"
                                       width="330">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.relationship"
                                    autocomplete="off"
                                    size="small"
                                    placeholder="">el-input>
                        template>
                      el-table-column>
                      <el-table-column prop=""
                                       label="参数"
                                       width="330">
                        <template slot-scope="scope">
                          <el-input v-model="scope.row.mobile"
                                    autocomplete="off"
                                    size="small"
                                    placeholder="">el-input>
                        template>
                      el-table-column>

                      <el-table-column label="操作"
                                       width="270">
                        <template slot-scope="scope">
                          <el-button size="mini"
                                     type="primary"
                                     plain
                                     v-if="domain.arr.length>=1"
                                     @click="addmembers(domain.key)">新增el-button>

                          <el-button size="mini"
                                     type="danger"
                                     plain
                                     v-if="domain.arr.length!==1"
                                     @click="delmembers(scope.$index, scope.row,domain.key)">删除el-button>
                          <el-button @click="upLayer(scope.$index,scope.row,domain.key)"
                                     icon="el-icon-top"
                                     size="mini">el-button>
                          <el-button @click="downLayer(scope.$index,scope.row,domain.key)"
                                     icon="el-icon-bottom"
                                     size="mini">el-button>

                        template>
                      el-table-column>
                    el-table>

                  el-form-item>
                el-col>
              el-row>
              div>
            draggable>
            
   <script>
   //导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data(){
  return{
   formInline: {
        arr: [],//数据验证模块的数组存放
        addFormArr: [],//最外层可以push添加多个模块的数组存放
      },
  }
   script>           

js代码部分

  upLayer (index, row, val) {
      var that = this;
      if (index == 0) {
        that.$message({
          message: "处于顶端，不能继续上移",
          type: "warning"
        });
      } else {
        this.formInline.addFormArr.forEach((item1) => {
          if (item1.key == val) {
            let upDate = item1.arr[index - 1];
            item1.arr.splice(index - 1, 1);
            item1.arr.splice(index, 0, upDate);
          }

        })

      }
    },
    downLayer (index, row, val) {
      var that = this;
      this.formInline.addFormArr.forEach((item1) => {
        if (index + 1 === item1.arr.length) {
          that.$message({
            message: "处于末端，不能继续下移",
            type: "warning"
          });
        } else {
          if (item1.key == val) {
            let downDate = item1.arr[index + 1];
            item1.arr.splice(index + 1, 1);
            item1.arr.splice(index, 0, downDate);
          }
        }
      })

    }
    ,
    addmembers (val) {
      this.formInline.addFormArr.forEach((item1) => {
        if (item1.key == val) {
          let obj = {
            id: parseInt(length),
            relationship: '',
            mobile: '',
            gongzuodanwei: '',
          }
          item1.arr.push(obj)
        }

      })
    },
    //数据验证的删除
    delmembers (index, row, item) {
      // var that = this;
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //点击确定的操作(调用接口)
        this.formInline.addFormArr.forEach((item1, index) => {
          console.log(item1.key, index)
          //此处为关键逻辑判断，判断当前的是哪个模块内部的操作添加表格行的操作，
          //判断添加表格行是当前的表格。如果不加此判断，再次增加相同表格
          //添加表格行的时候会两个表格相互影响，其实就是通过标识来判断
          if (item1.key == item) {
            item1.arr.splice(index, 1)
          }
        })
      }).catch(() => {
        //点取消的提示
        return;
      });
    },