0
点赞
收藏
分享

微信扫一扫

vue table 单条删除+批量删除

七公子706 2022-03-11 阅读 43
<el-button type="primary" @click="handleSure()" :disabled="dataListSelections.length <= 0">批量确认</el-button>

    <el-table
        :header-cell-style="{ background: '#3e8ef7', color: '#fff' }"
        :data="dataList"
        @selection-change="selectionChangeHandle"
        border>
		<el-table-column
          header-align="center"
          align="center"
          width="150"
          show-overflow-tooltip
          label="操作">
          <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleSure(scope.row.personId)">删除</el-button>
          </template>
        </el-table-column>
     </el-table>
data(){
	return {
	dataListSelections: [],
	}
}
//多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
//删除
    handleSure(id){
      var idX = id ? [id] : this.dataListSelections.map(item => {
        return item.personId
      })
      this.$confirm(`确定对[id=${idX.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          confirmPersonInfo(idX).then((data) => {
            if(data && data.code == 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getDataList() //刷新列表
            }
          })
          .catch((err) => {
            this.$message.error(err.data.msg);
          })
        })
    },
举报

相关推荐

0 条评论