【Vue】【ElementUI】使用树形el-table写的消息通知界面

需要写一个这样的消息界面:在这里插入图片描述

本来打算用js原生列表写,写了一会觉得麻烦死了,去翻element文档,发现了el-table就能做展开的这种:
在这里插入图片描述

开启el-table展开功能

在el-table标签里加这些:

<el-table  :data="tableData"  default-expand-all row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
</el-table>

需要注意两点:

  1. 如果你的row-key是id,那么你的绑定的data里必须有id字段,并且一级菜单id是顺序排列(1、2、3、、、),并包含children字段。
  2. 二级菜单id亲测不能重复,不然一级菜单无法展开合并。

绑定数据格式

可以参考element文档中给出的示例数据:

tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]

样式调整

1.去表头

:show-header="false"把表头去掉
防止秃顶太丑,再加一条分割线:

<el-divider></el-divider>
<el-table id="expand-table"  :data="tableData"   :show-header="false" default-expand-all row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
</el-table>

分割线样式:

.el-divider{
  margin: 0; 
  height: 0.0001rem; /* 这里设置分割线宽度 */
}

2.去掉展开行的小箭头

在这里插入图片描述
F12看了一下样式名是el-icon-arrow-right,
试了一下,需要放在全局样式里,不要scope,所以给el-table设置了id="expand-table",防止样式串到别的地方

#expand-table .el-icon-arrow-right{ /* 展开行小箭头 */
  display: none !important;
}

3.展开行的时间放在最左侧

在我的tabledata里,一级菜单的时间标题是createdAt字段,同样的在二级菜单第五列的时间也是createdAt字段,如下
在这里插入图片描述

这个用templatev-if处理
我这里直接把展开列的时间和内部表的icon放在同一列了,icon根据不同的消息类型设置样式
第一列:

<el-table-column prop="createdAt" label="" align="center" :formatter="dateFormat" width="120%">
  <template slot-scope="scope">
    <span v-if="scope.row.children" class="msg-font">{{scope.row.createdAt}}</span>
    <span v-if="scope.row.problemMsg"><i class="el-icon-warning problemicon"/></span>
    <span v-if="scope.row.dangerMsg"><i class="el-icon-warning dangericon"/></span>
  </template>
</el-table-column>

第五列:

<el-table-column prop="createdAt" label="" align="center" :formatter="dateFormat">
  <template slot-scope="scope"  v-if="!scope.row.children">
    <span >{{scope.row.createdAt}}</span>
  </template>
</el-table-column>

4.给一级和二级设置不同的样式

用官方文档给的每列样式row-style
在这里插入图片描述
el-table代码:

<el-table id="expand-table"  :data="tableData" :cell-style="msgTableRowClass"
  :show-header="false" default-expand-all row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
</el-table>

这里绑定的msgTableRowClass是一个函数,在methods里写:

    msgTableRowClass({row, rowIndex}){ //el-table-row的高度
     if(row.children) { //如果此行children存在,也就是一级菜单
         return { "height":"4vh !important" }
       }else{
       return { "height":"11vh !important" }
     }
   },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2.0和ElementUI2.0中使用el-table表格组件时,自适应高度可以通过以下步骤来实现: 1. 确定数据源 首先,我们需要确定用于填充表格的数据源。在el-table中,数据通常以数组的形式传递,其中每个数组元素代表表格中的一行数据。 2. 计算表格高度 在Vue中,我们可以使用计算属性来动态计算表格的高度。计算属性会根据数据源的变化自动更新表格高度。例如,我们可以使用下面的代码来计算表格高度: computed: { tableHeight: function() { // 获取窗口可见区域高度 var viewportHeight = window.innerHeight; // 计算表格头和分页组件的高度 var tableHeaderHeight = this.$refs.table.$el.querySelector('.el-table__header-wrapper').offsetHeight; var paginationHeight = this.$refs.pagination.$el.offsetHeight; // 计算表格内容区域的高度 var contentHeight = viewportHeight - tableHeaderHeight - paginationHeight - 20; return contentHeight; } } 在上面的代码中,我们首先获取窗口可见区域的高度,然后根据表格头和分页组件的高度计算表格内容区域的高度。最后,将计算出的高度返回。 3. 绑定表格高度 我们将计算属性中计算出的表格高度绑定到el-table组件中的height属性上,以实现自适应高度。例如,我们可以使用下面的代码将表格高度绑定到el-table组件上: <el-table :data="tableData" ref="table" :height="tableHeight"> 在上面的代码中,我们首先使用data属性传递数据源,然后使用ref属性给el-table组件添加一个引用,最后使用height属性将计算属性中计算出的表格高度绑定到组件上。 通过上述方法,我们可以在Vue2.0和ElementUI2.0中实现自适应高度的el-table表格组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值