ElementUI对表格某一行执行操作和批量操作限制

最新推荐文章于 2024-04-15 06:17:34 发布

前端杨小白

最新推荐文章于 2024-04-15 06:17:34 发布

阅读量512

点赞数 3

分类专栏： ElementUI

本文链接：https://blog.csdn.net/yangwqi/article/details/104802274

版权

ElementUI 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

<div slot="header" >
    <el-row type="flex" justify="space-between">
        <el-col :span="12">
            <el-button size="mini" @click="down(1)">批量下载</el-button>
            <el-button size="mini" @click="deletes(1)">批量删除</el-button>
        </el-col>
    </el-row>
</div>
<el-table :data="tableData" border style="width: 100%" ref="multipleTable">
    <el-table-column type="selection" width="40" align="center"></el-table-column>                        
    <el-table-column type="index" label="序号" width="50" :index="indexMethod" align="center"></el-table-column>
    <el-table-column prop="username" label="用户名称" align="center"></el-table-column>          
    <el-table-column prop="authorFirm" label="作者单位" align="center"></el-table-column>        
    <el-table-column fixed="right" label="操作" align="center" width="80px">
        <template slot-scope="scope">
            <i class="el-icon-edit blue" @click="editForm(scope.row)"></i>&nbsp;
            <i class="el-icon-download blue" @click="down(scope.row)"></i>&nbsp;
            <i class="el-icon-delete blue" @click="deletes(scope.row)"></i>
        </template>
    </el-table-column>
</el-table>

deletes(scope) {
    var vm=this;
    var arr="";
    // 批量删除
    if(scope==1){
        var data = this.$refs.multipleTable.selection;
        data.forEach(function(item){
            arr += item.guid+','
        });
    }else{
        // 删除
        arr=scope.guid+','
    }
        this.$alert('此操作将永久删除该模型文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    type: 'warning'
    }).then(() => {
        request.delete(apis.manageModel+'/'+arr)
        .then(function(response) {
        if (response.data.code== 200) {
            vm.findForm(1)
        }
        })
        .catch(function(error) {
            console.log(error);
        });
    })
},
//下载文件
down(scope) {
    var vm=this;
    var arr="";
    // 批量下载
    if(scope==1){
        var data = this.$refs.multipleTable.selection;
        data.forEach(function(item){
            arr += item.guid+','
        });
    }else{
        // 下载当前行 
        arr=scope.guid+','
    }
    window.location.href = apis.modelFile+'/'+arr;
},