element根据序列批量删除table选中行_el-table-column排序删除行-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40393313/article/details/105239334

本文展示了一个使用Element UI框架创建的表格操作示例，包括数据展示、删除单条记录和批量删除功能。通过Vue.js的数据绑定和方法调用，实现了动态更新表格数据和响应用户操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

template:

 <div class="center">
 <el-button type="primary" @click="delArr">删除</el-button>
      <el-table 
      ref="multipleTable" 
      :data="tableData" 
      border 
      highlight-current-row 
      style="width: 100%">
        <el-table-column label="序号" width="50">
         <template slot-scope="scope">
         {{ scope.row.index = scope.$index+1 }}
         </template> 
         </el-table-column>
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="title" label="标题" align="center" />
        <el-table-column prop="date" label="操作时间" align="center" />
        <el-table-column prop="publicer" label="发布人" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary">查看</el-button>
            <el-button type="primary" @click="del(scope.row.index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

script:

export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          publicer: '王小虎1',
          title: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          publicer: '王小虎2',
          title: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          publicer: '王小虎3',
          title: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          publicer: '王小虎4',
          title: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  methods: {
    del(val) {
      console.log(val)
      this.tableData.splice(val - 1, 1)
    },
      delArr() {
      console.log(this.$refs.multipleTable.selection)
      for (var i = this.$refs.multipleTable.selection.length - 1; i >= 0; i--) {
        this.tableData.splice(this.$refs.multipleTable.selection[i].index - 1, 1)
      }
    }
  }
}