web前端-Vue element UI中的el-table勾选框 展示隐藏;设置默认勾选、禁用
1、el-table如果我们想新增一个勾选框,在 .vue文件中<el-table-column type="selection" width="55" align="center" />如果不需要加这个勾选框,直接不写上面那行代码即可<template><div class="app-container"><!--@selection-change="h
·
1、el-table如果我们想新增一个勾选框,在 .vue文件中
<el-table-column type="selection" width="55" align="center" />
如果不需要加这个勾选框,直接不写上面那行代码即可
<template>
<div class="app-container">
<!--@selection-change="handleSelectionChange"> table的选择项改变触发事件 -->
<el-table v-loading="loading" :data="userList"> <!--@selection-change="handleSelectionChange">-->
//勾选框
<!--<el-table-column type="selection" width="55" align="center" />-->
<el-table-column label="用户名" align="center" prop="user.userNameCn" />
<el-table-column label="时间" align="center" prop="begintime" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.begintime, '{y}-{m}-{d} {HH}:{mm}:{ss}') }}</span>
</template>
</el-table-column>
</div>
</template>
2、设置勾选框默认勾选、禁用
<el-table
ref="table"
:data="tableData"
stripe
border
@select="selectSingle" <!--单独勾选某行数据的勾选框-->
@select-all="selectAll" <!--勾选头部勾选框,进行全选或者全不选-->
>
<el-table-column
type="selection"
fixed
width="50"
align="center"
:selectable="selectable" <!--设置禁用或非禁用状态-->
>
</el-table>
单选,全选事件响应
methods:{
//一、获取列表数据
storageList(){
serviceApi.storageList({}).then(res => {
if(res.data.successFlg && res.data.data){
//1、获取列表数据,存入tableData
this.tableData = res.data.data ? res.data.data : [];
//2、筛选出remark为“1”的数据,该数据勾选状态需要设置为勾选且禁用
if(this.tableData.length > 0){
let checkedData = this.tableData.filter((item) => {
return item.remark === '1';
});
let $this = this;
//3、一定要使用this.$nextTick(),等数据都渲染到表格中再设置勾选状态,否则直接使用$this.$refs.table.toggleRowSelection(item);没有效果
this.$nextTick(() => {
if(checkedData.length > 0){
checkedData.forEach((item) => {
//toggleRowSelection(row, selected)方法接受两个参数,row传递被勾选行的数据,selected设置是否选中
$this.$refs.table.toggleRowSelection(item,true);
});
}
});
}
}
}).catch(err => {
console.error(err);
});
},
//二、单独勾选表格中某条数据所对应的勾选框
selectSingle(selection,row){
let data = {
remark:'1',
id:row.id
};
serviceApi.saveMediaStorageSpace(data).then(res => {
if(res.data.successFlg && res.data.data){
this.$message.success('成功');
this.storageList();//列表数据刷新
}else{
this.$message.error('失败');
}
}).catch(err => {
console.error(err);
});
},
//三、勾选头部的勾选框,进行全选
selectAll(selection){
if(selection.length > 0){//length>0表示全选,length=0为全不选
selection.forEach((item) => {
let data = {
remark:1,
id:item.id
};
serviceApi.saveMediaStorageSpace(data).then(res => {
if(res.data.successFlg && res.data.data){
this.$message.success('成功');
this.storageList();//列表数据刷新
}else{
this.$message.error('失败');
}
}).catch(err => {
console.error(err);
});
});
}
},
//四、设置表格中勾选框是否是禁用状态
selectable(row,index){
if(row.remark === '1'){
return false;//禁用状态
}else{
return true;//非禁用状态
}
},
}
1、如果是表格中一开始没有数据,需要通过请求接口获取数据或者从其他途径获取数据的话,
那么一定要记得再获取完数据之后使用this.nextTick( ) , 在 this.nextTick(),在this.nextTick(),在this.nextTick()的回调中使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态
2、如果是静态数据的话,则可以直接使用el-table的toggleRowSlection()方法来设置勾选框的勾选状态,如下:
export default {
name:'app',
data(){
return {
tableData:[
{
name:'c',
romTotal:22
},
{
name:'d',
romTotal:11
},
{
name:'f',
romTotal:33
}
],// 表格数据
tableHeader:[ //表格头部
{
label: '表头1',
width: '150',
},
{
label: '表头2',
width: '150',
}
],
}
},
mounted(){
this.$refs.table.toggleRowSelection(tableData[0],true);
}
}
更多推荐
已为社区贡献25条内容
所有评论(0)