elementui 实现自定义表格的操作

 <el-table :data="tableData" style="width: 100%">

          <el-table-column align="center" label="规格值" prop="value">

            <template slot-scope="scope">

              <el-input

                v-model="scope.row.value"

                :placeholder="`规格值${scope.$index}`"

                size="mini"

              />

            </template>

          </el-table-column>

          <el-table-column align="center" label="排序" prop="sort">

            <template slot-scope="scope">

              <i

                v-if="scope.$index === 0 && tableData.length > 1"

                class="el-icon-bottom"

                style="color: rgb(57, 139, 247)"

                @click="handleClickTwo('向下', scope.$index)"

              ></i>

              <i

                v-else-if="

                  scope.$index === tableData.length - 1 && tableData.length > 1

                "

                class="el-icon-top"

                style="color: rgb(57, 139, 247)"

                @click="handleClickTwo('上移', scope.$index)"

              ></i>

              <div v-else-if="tableData.length > 1">

                <i

                  class="el-icon-top"

                  style="color: rgb(57, 139, 247)"

                  @click="handleClickTwo('上移', scope.$index)"

                ></i>

                <i

                  class="el-icon-bottom"

                  style="color: rgb(57, 139, 247); margin-left: 10px"

                  @click="handleClickTwo('向下', scope.$index)"

                ></i>

              </div>

            </template>

          </el-table-column>

          <el-table-column align="center" label="操作">

            <template #default="{ row }">

              <el-button type="text" @click="handleDelete(row)">删除</el-button>

            </template>

          </el-table-column>

        </el-table> //这是我自定义的表格

1:实现自定义删除

 handleDelete(e) {

        首先需要拿到你定义的数组

        let id1 = this.tableData.findIndex((item) => { 

          //findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

          //查询这个数组的每一项

          if (item.id == e.id) {

            //判断如果点击的这个数组的id和传递过来的id一样 就删除

            return true

          }

        })

        this.tableData.splice(id1, 1) //表示从数组中索引为 id1 开始删除，一共删除 1  个元素

      },

2：自定义排序

 handleClickTwo(action, index) {

        let targetIndex = action === '上移' ? index - 1 : index + 1

        ;[this.tableData[index], this.tableData[targetIndex]] = [

          this.tableData[targetIndex],

          this.tableData[index],

        ]

        this.tableData = [...this.tableData]

      },