①el-cascader中的option中的value值 ,要与el-table的:data的值中的每个属性值, 一致(我这里是data、name、address属性) -----关键点
②注意el-table的:row-class-name属性以及对应的rowClassName方法,它可以实时监听到页面的行row变化,并且和el-cascader的v-model=‘hrerarchy’相配合,从而操控自定义变量ifHierarchyIncluded的值是否为true,最后通过ifHierarchyIncluded去操控是否显示为’hide’
③hide是一个css样式,本质是display:none
好像有点绕,具体看代码逻辑吧。
<template>
<div>
<div class="block">
<!-- <span class="demonstration">hover 触发子菜单</span> -->
<el-cascader
v-model="hierarchy"
:options="mzoptions"
:props="{ expandTrigger: 'hover' , multiple: true}"
@change="handleChange"
clearable
filterable
placeholder="试试搜索吧"
></el-cascader>
</div>
<el-table
:data="tableData"
stripe
:row-class-name="rowClassName"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
onlyInvalidRowsVisible:false,
hierarchy:[],
value: [],
mzoptions: [
{
value: '2008',
label: '第一年',
children: [{
value: '张三',
label: '张三',
children: [{
value: '成都市',
label: '初地址'
},{
value:"北京市",
label:"第二个地址"
},
]
}, {
value: '陈五',
label: '陈五',
children: [{
value: '西安市',
label: '初地址'
}, {
value: '贵阳市',
label: '第二个地址'
}]
}]
},
{
value: '2009',
label: '第二年',
children: [{
value: '王小虎',
label: '王小虎',
children: [{
value: '上海市',
label: '地址'
}, {
value: '合肥市',
label: '第二个地址'
},
]
},
{
value: '李四',
label: '李四',
children: [{
value: '南京市',
label: '地址'
}, ]
},
]
},
{
value: '2010',
label: '第三年',
children: [{
value: '田七',
label: '田七',
children:[{
value:"深圳市",
label:"地址"
}]
},
]
}],
tableData: [{
date: '2008',
name: '张三',
address: '成都市'
},{
date: '2008',
name: '张三',
address: '北京市'
},
{
date: '2008',
name: '陈五',
address: '西安市'
},
{
date: '2008',
name: '陈五',
address: '贵阳市'
},
{
date: '2009',
name: '王小虎',
address: '上海市'
}, {
date: '2009',
name: '王小虎',
address: '合肥市'
},{
date: '2009',
name: '李四',
address: '南京市'
}, {
date: '2010',
name: '田七',
address: '深圳市'
}],
};
},
methods: {
handleChange(value) {
console.log(value);
},
rowClassName({row,index}){
//匹配逻辑
var ifHierarchyIncluded,
ifFindHierarchy,
rowHierarchy = row.date+row.name+row.address //tabledata的数据直接拼接
// console.log("rowHierarchy:::"+rowHierarchy)
if(this.hierarchy.length!=0){ //在cascader标签内双向绑定,一开始hierarchy为空,不执行,直接令ifHierarchy为true,全部显示出来。
//当hierarchy改变时,且自身不为空,执行判断逻辑。
ifFindHierarchy = this.hierarchy.find(item=>{
//console.log("item:::"+item[0]+item[1]+item[2])
return item[0]+item[1]+item[2]==rowHierarchy
})
if(ifFindHierarchy!=undefined)ifHierarchyIncluded = true
else ifHierarchyIncluded = false
}else ifHierarchyIncluded = true
//开始判断是否显示行
if(this.onlyInvalidRowsVisible==false){
/* if(this.skuType.length!=0){
if(this.skuType.includes(row.sku_type)==false){
return 'hide'
}else return ''
} */
if(ifHierarchyIncluded==true){
return ''
}else return 'hide'
}else{
if(row.invalidRowFlg!=true){
return 'hide'
}else{
if(ifHierarchyIncluded==true){
return ''
}else return 'hide'
}
}
}
}
};
</script>
<style lang="stylus" scoped>
.el-table {
>>>table {
font-size: 14px;
//隐藏行
.hide{
display:none
}
}
>>>.el-table__body-wrapper tr {
height: 41px;
}
}
</style>