Element Table常用设置:展开行满足条件展开
完整实现
<el-table :data="menuList" style="width: 100%" :row-class-name="isShowIcon">
<el-table-column type="expand">
<template slot-scope="props" v-if="props.row.menuList">
<el-table :data="props.row.menuList" :row-class-name="isShowIcon" :show-header=false>
<el-table-column label="菜单名称" prop="menuName"></el-table-column>
<el-table-column label="请求地址" prop="url"></el-table-column>
<el-table-column label="可见" prop="isHide"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="菜单名称" prop="menuName"></el-table-column>
<el-table-column label="请求地址" prop="url"></el-table-column>
<el-table-column label="可见" prop="isHide"></el-table-column>
</el-table>
<script>
export default {
data() {
return {
tableData5: [
{
id: "1",
name: "商品1",
address: "云南",
type:3,
child:[
{
comp_name1:'一行商品1',
comp_name2:'一行商品2',
},
{
comp_name1:'一行商品1',
comp_name2:'一行商品2',
},
]
},
{
id: "2",
name: "商品2",
address: "西藏",
type:2,
child:[
{
comp_name1:'二行商品1',
comp_name2:'二行商品2',
},
{
comp_name1:'二行商品1',
comp_name2:'二行商品2',
}
]
},
{
id: "3",
name: "商品3",
address: "黑龙江",
type:4,
child:[
{
comp_name1:'三行商品1',
comp_name2:'三行商品2',
},
{
comp_name1:'三行商品1',
comp_name2:'三行商品2',
},
]
},
{
id: "4",
name: "商品4",
address: "海南",
type:1,
child:[
{
comp_name1:'四行商品1',
comp_name2:'四行商品2',
}
]
},
{
id: "5",
name: "商品5",
address: "重庆",
type:0,
child:[]
}
],
expands:[]
};
},
filters:{
TypeFilter(val){
if(val==1){
return '食品'
}else if(val==2){
return '纺织'
}else if(val==3){
return '教育'
}else if(val==4){
return '家居'
}else{
return '未知'
}
}
},
methods:{
editInfo(){ //编辑
},
isShowIcon(row, index){
if(row.row.child.length>0)
return ''
else
return 'hiderow'
},
rowClick(row, event, column) { //控制展开行
var NoIndex = column.type.indexOf("expand");
if (NoIndex == 0 && row.child.length <= 0) {
this.expands = [];
return;
}
if (row.child.length > 0) {
Array.prototype.remove = function(val) {
let index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
if (this.expands.indexOf(row.id) < 0) { //确保只展开一行
this.expands.shift();
this.expands.push(row.id);
} else {
this.expands.remove(row.id);
}
} else {
return;
}
},
}
};
</script>
<style>
#table2 .el-table__expanded-cell{
padding:0 !important;
border-bottom: none;
}
.hiderow .el-table__expand-column .el-icon {
visibility: hidden;
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
.tabBg {
background: #fafafa !important;
}
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
重要部分
<el-table :data="menuList" style="width: 100%" :row-class-name="isShowIcon">
<el-table-column type="expand">
<template slot-scope="props" v-if="props.row.menuList">
<el-table :data="props.row.menuList" :row-class-name="isShowIcon" :show-header=false>
<el-table-column label="菜单名称" prop="menuName"></el-table-column>
<el-table-column label="请求地址" prop="url"></el-table-column>
<el-table-column label="可见" prop="isHide"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="菜单名称" prop="menuName"></el-table-column>
<el-table-column label="请求地址" prop="url"></el-table-column>
<el-table-column label="可见" prop="isHide"></el-table-column>
</el-table>
.hiderow .el-table__expand-column .el-icon {
visibility: hidden;
}
//层级不够
::v-deep .hiderow .el-table__expand-column .cell .el-icon {
visibility: hidden;
}
methods:{
isShowIcon(row, index){
if(row.row.menuList != null)
return ''
else
return 'hiderow'
},
推荐阅读:
扫描二维码,在手机上阅读