element根据序列批量删除table选中行

最新推荐文章于 2024-03-07 13:04:32 发布

GraySheep

最新推荐文章于 2024-03-07 13:04:32 发布

阅读量1.5k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40393313/article/details/105239334

版权

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)
      }
    }
  }
}