vue中el-table和el-cascader联动，实现实时切换页面展示。

①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>