vue-element-admin批量删除 - 个人学习记录

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

批量删除 vue-element-admin

打开边栏(ESC) 关闭边栏(ESC)

vue-element-admin批量删除

用vue和elementUI实现批量操作常见于table表格，前提是table表第一列是可以多选的框：

<el-table-column type="selection" width="55"> </el-table-column>

如上图所示，当没有选中任何一项时，批量删除按钮是不可点击的，当选中其中一项或多项时，批量删除按钮变成可点击；

下边就具体介绍一下，如何实现批量删除功能：
1.首先给按钮加disabled属性

<el-button class="filter-item" type="danger" @click="handleDelAll" :disabled="ids.length === 0" style="margin-right: 10px;" icon="el-icon-delete">批量删除</el-button>

//data里事先声明ids
data:{
    ids:[]
}

也就是说，当ids为空数组时，按钮不可点击；

2.给table添加change事件，动态获取ids

<el-table
    :data="tableData"
    :height="tableHeight"
    v-loading="tableLoading"
    border
    stripe
    size="mini"
    style="width: 100%"
    @selection-change="handleSelectionChange">
 ......

然后在change事件动态获取ids

// 全选,bankId是后台数据表的主键id
    handleSelectionChange(val) {
      this.ids = val.map(el => el.bankId)
      // console.log(this.ids);
    },

3,点击按钮，执行批量删除

// 批量删除
    handleDelAll(){
      this.$confirm('确定要批量删除选中信息吗？', {
        closeOnClickModal: false,
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            reqDelAll(this.ids).then(res => {
              done()
              instance.confirmButtonLoading = false
              this.getList()
              this.$message.success(res.msg)
            }).catch(err => {
              console.log(err)
              instance.confirmButtonLoading = false
            })
          } else {
            done()
          }
        }
      }).catch(() => {})
    }

4，axios请求方法

// 批量删除
export function reqDelAll(ids) {
  return request({
    url: '/admin/bank/delAll',
    method: 'post',
    data: { ids }
  })
}

5，后台批量删除接口(thinkphp)

/**
	 * 批量删除
	 */
	public function delAll(){
		$ids = input('post.ids',0);
		$rs = $this->where([['bankId','in',$ids]])->setField(['dataFlag'=>-1]);
		// dump($rs);
		// die;
		if(false !== $rs){
			return ZHTReturn('操作成功',200);
		}else{
			return ZHTReturn('操作失败',403);
		}
	}

赏