關於展開改變樣式

最新推荐文章于 2024-08-15 19:41:48 发布

壹罐寡言

最新推荐文章于 2024-08-15 19:41:48 发布

阅读量63

点赞数

文章标签： vue.js css3 前端

本文链接：https://blog.csdn.net/weixin_44763169/article/details/128563148

版权

文章展示了在Vue.js中使用ElementUI库创建的三级表格树形结构，当菜单展开时，子菜单的字体大小会根据层级变化。通过监听expand-change事件和动态设置CSS类，实现了菜单展开状态与字体大小的联动效果。

摘要由CSDN通过智能技术生成

主要是在三級菜單里，當菜單展開時字體變大

展開前：
请添加图片描述

展開后：
请添加图片描述

相關代碼：

<template>
<div class="gnstree">
  <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    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>
</template>
<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){
       console.log(row);
       console.log(expandedRows);
       if (row.level===1) {
         this.$set(row,"row1",expandedRows)
       }
       if (row.level===2) {
          this.$set(row,"row2",expandedRows)
       }
     }
    },
  }
</script>
<style lang="less" scoped>
.font_18{
  font-size: 18px;
}
.font_16{
  font-size: 16px;
}
</style>