欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vueelement-UI批量删除

程序员文章站 2022-06-26 09:45:46
vue element-ui 批量删除 1.首先在el-table的标签中添加一个事件@selection-change="selschange",还得在批量删除的标签中写上:d...

vue element-ui 批量删除

1.首先在el-table的标签中添加一个事件@selection-change="selschange",还得在批量删除的标签中写上:disabled="this.sels.length === 0"



      
      
      
        
          
          
          
          {{ scope.row.label }}
        
      
      
      
      

批量删除

2.然后去实现这个事件

selschange(sels) {
        this.sels = sels
      }

3.看到sels没有定义,我们在return中定义一下sels

export default {
    data(){
      return{
        sels: [],//选中的值显示
      }
    }
}

4.写批量删除的事件在导入接口的时候参数就写paths:path

deletefileordirectory() {
        let path = this.sels.map(item => item.path).join()//获取所有选中行的path组成的字符串,以逗号分隔
        console.log(path)
        this.$confirm('此操作将永久删除该文件及其子文件, 是否继续', '提示', {
          confirmbuttontext: '确定',
          cancelbuttontext: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.deletefileordirectory({paths:path}).then(result => {
            let {data} = result
            console.log("批量删除")
            let flag = this.$config.executeresult(data)
            if (flag) {
              this.$message.success(data.operationcontentdetails)
              this.$emit('reloadtree')
            }
          })
        })
      }