el-table 的前台添加，上移，下移，删除功能_树形el-table上下移动

<el-table :data="tableList" style="width: 630px">
            <el-table-column type="index" label="序号" align="center" width="50">
              <template slot-scope="scope">
                <span>{{optionsList[scope.$index] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="选项内容" align="center" width="190">
              <template slot-scope="{row}">
                <el-input type="textarea" :rows="1" v-model="row.content" placeholder="请输入选项内容" style="width:160px">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="comment" label="选项说明" align="center" width="190">
              <template slot-scope="{row}">
                <el-input type="textarea" :rows="1" v-model="row.comment" placeholder="请输入选项说明" style="width:160px">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
              <template slot-scope="scope">
                <el-button class="btn-style" type="text" @click="addOption(scope.$index)" title="添加选项"><i
                    class="iconfont ic-circle-plus-o"></i>
                </el-button>
                <el-button class="btn-style" type="text" :class="scope.$index=== 0 ? 'disabledStyle':''"
                  @click="upMove(scope.$index)" title="上移">
                  <i class="iconfont ic-circle-up"></i>
                </el-button>
                <el-button class="btn-style"
                  :class="scope.$index== tableList.length-1? 'disabledStyle':''" type="text"
                  @click="upDown(scope.$index)" title="下移">
                  <i class="iconfont ic-circle-down"></i>
                </el-button>
                <el-button class="btn-style" type="text" @click="delOption(scope.$index)"
                  :class="tableList.length <= 1 ? 'disabledStyle':''" title="删除"><i
                    class="iconfont ic-trash"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
      

<script>
 data () {
    return {
    optionsList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
    tableList:[{
            label: 'A',
            content: '',
            comment: '',
          }]
    }
    },
  created() {
  //点击新增等按钮时，再次点击空格会回调点击方法，需要created中阻止默认行为
    document.onkeydown = function (e) {   //按下回车提交
      let key = e.code;
      //事件中keycode=13为回车事件
      if (key === 'Space') {
        e.preventDefault()
      }
    };
  },
methods:{
addOption (index) {
      // 添加
      this.updateTable(index, '2')
    },
    upMove (index) {
      // 上移
      this.updateTable(index, '0')
    },
    upDown (index) {
      // 下移
      this.updateTable(index, '1')
    },
    updateTable (index, type) {
      var data = this.tableList;
      var temp = data[index];
      var copyTemp = {};
      var dataup = new Array();
      var datadown = new Array();
      for (var i = 0; i < data.length; i++) {
        if (i < index) {
          dataup.push(data[i]);
        } else if (index < i) {
          datadown.push(data[i]);
        }
      }
      var allData = new Array();
      if (type === "3") { // 删除当前改变下面
        debugger
        allData = allData.concat(dataup);
        allData = allData.concat(datadown);
      } else if (type === "1") {
        // 下移
        allData = allData.concat(dataup);
        copyTemp = datadown[0];
        datadown[0] = temp;
        temp = copyTemp;
        var tempArr = [];
        tempArr.push(temp);
        tempArr = tempArr.concat(datadown);
        allData = allData.concat(tempArr);
      } else if (type === "0") {
        // 上移
        copyTemp = dataup[dataup.length - 1];
        dataup[dataup.length - 1] = temp;
        temp = copyTemp;
        for (var h = 0; h < dataup.length - 1; h++) {
          allData.push(dataup[h])
        }
        var tempArr = [];
        // tempArr = tempArr.concat(allData);
        tempArr.push(dataup[dataup.length - 1]);
        tempArr.push(copyTemp);
        tempArr = tempArr.concat(datadown);
        allData = allData.concat(tempArr);
      } else if (type === "2") {
        // 添加
        debugger
        allData = allData.concat(dataup);
        // allData = allData.concat(datadown);
        let obj = {
          label: '',
          content: '',
          comment: '',
          allowFillBlanks: '0',
          allowFillBlanksFlag: false
        }
        allData.push(temp, obj)
        allData = allData.concat(datadown);
      }
      this.tableList = allData;
    },
    // 删除
    delOption (index) {
      this.updateTable(index, "3")
    },
}

 </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142