vue+elementUI实现table-item的上下移动

• 需求描述：默认显示编辑按钮，删除和上下移动按钮置灰并禁用；点击编辑之后，编辑按钮隐藏，展示添加和保存按钮，第一项的上移按钮和最后一项的下移按钮保持不变，其他操作按钮高亮，变为可操作；此类标签添加不可超过10个。

<template>
  <div class="main-content">
    <!-- 操作按钮 -->
    <div class="marginTB10 fr">
      <div v-if="!isEdit">
        <el-button type="primary" icon="el-icon-edit" @click="isEdit = true">编辑</el-button>
      </div>
      <div v-else>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd()">添加</el-button>
        <el-button type="success" icon="el-icon-check" @click="handleSave()">保存</el-button>
      </div>
    </div>
    <!-- table内容 -->
    <el-table :header-cell-style="tableHeaderColor" border :data="tableData" :max-height="maxHeight" style="width: 100%;">
      <el-table-column type="index" width="100" align="center" label="序号"></el-table-column>
      <el-table-column property="content" align="center" label="用户"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <p class="flex-se-c">
            <el-button :disabled="isEdit ? false : true" type="text"><i @click="handleDel()" :class="[isEdit?'tableOptBtnY el-icon-delete':'tableOptBtnN el-icon-delete']"></i></el-button>
            <el-button :disabled="!isEdit || scope.$index=== 0? true : false" type="text" @click="handleMoveUp(scope.$index,scope.row)"><i :class="[!isEdit||scope.$index=== 0?'tableOptBtnN el-icon-top':'tableOptBtnY el-icon-top']"></i></el-button>
            <el-button :disabled="!isEdit || scope.$index===(tableData.length-1)? true : false" type="text" @click="handleMoveDown(scope.$index,scope.row)"><i :class="[!isEdit||scope.$index===(tableData.length-1)?'tableOptBtnN el-icon-bottom':'tableOptBtnY el-icon-bottom']"></i></el-button>
          </p>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加标签弹窗 -->
    <el-dialog title="添加标签" width="360px" :visible.sync="visible">
      <main class="paddingLR20">
        <div class="flex-c-c flex-nowrap">
          <p>添加标签：</p>
          <el-input v-model="submitForm.label" maxlength="5" show-word-limit></el-input>
        </div>
        <div class="paddingTB20 flex-e">
          <el-button type="warning" @click="visible=false">取消</el-button>
          <el-button type="primary" @click="handleSubmit()">提交</el-button>
        </div>
      </main>
    </el-dialog>
  </div>
</template>

• 说明：类名’tableOptBtnY’为操作按钮可操作时的样式；类名’tableOptBtnN’为操作按钮不可操作时的样式。(marginTB10，fr，flex-se-c，flex-c-c，flex-nowrap，paddingTB20，flex-e等公共样式就不做展示，如有萌新需要可以滴滴我)

import {
    
     getstrategyCommentList } from "@/api/strategyMgt";
export default {
    
    
  data() {
    
    
    return {
    
    
      isEdit: false, //是否是编辑状态
      visible: false, //是否显示添加标签弹窗
      tableData: [
        {
    
     content: "精选" },{
    
     content: "周边" },{
    
     content: "其他城市" },{
    
     content: "精选" },{
    
     content: "周边" },
        {
    
     content: "精选" },{
    
     content: "精选" },{
    
     content: "周边" },{
    
     content: "周边" },{
    
     content: "其他城市" },
      ], //table数据
      submitForm: {
    
    
        label: ""
      }
    };
  },
  created() {
    
    
    this.getData()
  },
  computed: {
    
    
    maxHeight() {
    
    
      return `${
      
      window.screen.availHeight - 220}px`;
    }
  },
  methods: {
    
    
    getData() {
    
      // 获取当前表格数据
      getstrategyCommentList().then(res => {
    
    
      this.tableData = res.data
      });
    },
    
    handleDel() {
    
    },  // 删除操作 
    
    handleMoveUp(index,row){
    
      // 标签上移
      var _self = this;
      if (index > 0) {
    
    
        let upItem = _self.tableData[index - 1];
        _self.tableData.splice(index - 1, 1);
        _self.tableData.splice(index,0, upItem);
      } else {
    
    
        console.log("It's already the first one. It can't be moved up");
      }
    },

    handleMoveDown(index,row){
    
       // 标签下移
       var _self = this;
       if ((index + 1) === _self.tableData.length){
    
    
        console.log("It's the last one. It can't be moved down");
       } else {
    
    
         let downItem = _self.tableData[index + 1];
         _self.tableData.splice(index + 1, 1);
         _self.tableData.splice(index,0, downItem);
       }
     },
    
    handleAdd(){
    
      // 点击添加按钮
      if(this.tableData.length>=10){
    
    
        this.$message.error('最多可添加10个热门搜索标签');
      }else{
    
    
        this.visible = true
      }
    },
    
    handleSubmit() {
    
      // 提交添加标签
      // ......
      this.visible = false;
    },
    
    handleSave() {
    
      // 保存修改
      // ......
      this.isEdit = false;
    },
    
    tableHeaderColor({
    
     row, column, rowIndex, columnIndex }) {
    
       // 表头颜色
      if (rowIndex === 0) {
    
     return "background-color: #F7F9FC;color: black;font-weight: 600;";}
    }
  }
};

<style scoped>
.main-content {
    
    
  padding: 0 5% 0 5%;
}
</style>