關於多級菜單展開后改變樣式處理

先看效果圖

html代碼

// html代碼
<template>
<div class="gnstree">
  <div class="centent">
  <el-table
    :data="tableData"
    style="width: 100%;"
    row-key="id"
    border
    @expand-change="change"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column 
      label="日期"
      sortable
      width="180">
      <template slot-scope="scope">
        <span :class="{font_18:scope.row.row1,font_16:scope.row.row2}">{{scope.row.date}}</span> 
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
         <span :class="{font_18:scope.row.row1,font_16:scope.row.row2}">{{scope.row.name}}</span>  
      </template>
    </el-table-column>
    <el-table-column
      label="地址">
     <template slot-scope="scope">
        <span :class="{font_18:scope.row.row1,font_16:scope.row.row2}">{{scope.row.address}}</span>  
      </template>
    </el-table-column>
  </el-table>
  </div>
</div>
</template>

js代碼

<script>
  export default {
    data() {
      return {
        tableData: [ {
          id: 1,
          level:1,
          date: 3,
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 2,
              level:2,
              date: 2,
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              children: [{
              id: 3,
              level:3,
              date: 1,
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }]
            }, {
              id: 4,
              level:2,
              date: 5,
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, 
         {
          id: 5,
          level:1,
          date: 7,
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 6,
              level:2,
              date: 10,
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              children: [{
              id: 7,
              level:3,
              date: 8,
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }]
            }, {
              id: 8,
              level:2,
              date: 9,
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        },],

      }
    },
    methods: {
     change(row,expandedRows){
       if (row.level===1) {
         this.$set(row,"row1",expandedRows)
       }
       if (row.level===2) {
          this.$set(row,"row2",expandedRows)
       }
     },
    },
  }
</script>

樣式代碼

<style lang="less" scoped>
.gnstree{
  
  .font_18{
    font-size: 18px;
  }
  .font_16{
    font-size: 16px;
  }
}
</style>