1. 程式人生 > 實用技巧 >上下移動順序

上下移動順序

上移:moveUp
下移:moveDown

          <el-table ref="multipleTable" :height="operaHeight" :data="listTableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="操作名稱" min-width="30%">
              <template slot-scope="scope">
                <span @click="btnActionDataClick(scope.row)">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作型別" min-width="30%"></el-table-column>
            <el-table-column prop="address" label="向上移動">
              <template slot-scope="scope">
                <el-button size="mini" :disabled="scope.$index === 0" @click="moveUp(scope.$index, scope.row)">
                  <i class="el-icon-arrow-up"></i>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="向下移動">
              <template slot-scope="scope">
                <el-button size="mini" :disabled="scope.$index === listTableData.length - 1" @click="moveDown(scope.$index, scope.row)">
                  <i class="el-icon-arrow-down"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>


data(){
      return{
            listTableData:[]
      }
},

methods:{
    /**
     * 操作向上移動
     */
    moveUpmoveUp(index) {
      console.log(this.listTableData);
      // 儲存上一條資料
      let updata = this.listTableData[index - 1];
      // 刪除上一條的資料
      this.listTableData.splice(index - 1, 1);
      // 將上一條資料插入當前的索引陣列
      this.listTableData.splice(index, 0, updata);
    },

    /**
     * 操作向下移動
     */
    moveDown(index) {
      // 儲存下一條資料
      let downData = this.listTableData[index + 1];
      // 刪除下一條資料
      this.listTableData.splice(index + 1, 1);
      // 將下一條資料插入當前的索引中
      this.listTableData.splice(index, 0, downData);
    },
}