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>