template部分
       只在树形的结构中显示编辑与删除按钮
      这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column
v-for="(item,index) in tableList"
:key="index"
:label="item.label"
:prop="item.prop"
></el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row)"
type="primary"
size="mini"
v-if="!scope.row.date"
>编辑</el-button>
<el-button
@click="downloadImg(scope.row)"
type="text"
size="small"
v-if="!scope.row.date"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>

data部分   tableList 写成数组对象dom节点不用写那么多(方便维护),里面的数据相当于是标题和 prop 中需要渲染的数据

tableData里面的数据是表格中的数据,如果有children有数据的话就会 出现 element 表格中会出现一个下拉图标

data() {
return {
tableList: [
{
label: "级别",
prop: "date"
},
{
label: "名称",
prop: "name"
},
{
label: "别名",
prop: "alias"
},
{
label: "操作员",
prop: "operator"
},
{
label: "状态",
prop: "state"
}
],
tableData: [
{
id: 1,
date: "个人",
children: [
{
id: 11,
name: "第二根半价套餐",
alias: "是兄弟就来割",
operator: "铁手无情",
state: "无痛"
}
]
},
{
id: 2,
date: "科室",
children: []
}, {
id: 3,
date: "全院",
children: [
{
id: 31,
name: "第二根半价套餐",
alias: "是兄弟就来割",
operator: "铁手无情",
state: "无痛"
},
{
id: 41,
name: "第二根半价套餐",
alias: "是兄弟就来割",
operator: "铁手无情",
state: "无痛"
}
]
}
]
};
},

vue+Element 表格中的树形数据的更多相关文章

  1. Vue&Element开发框架中增加工作流处理,查看申请单中整合多个处理类型的处理

    关于我在Winform框架.混合框架.Bootstrap开发框架中的简易审批性工作流模块,我写过不少文章,有兴趣可以参考<工作流模块>的随笔进行了解,本篇随笔在完成了Vue&Ele ...

  2. Vue&Element开发框架中增加工作流处理,工作流的各个管理页面的界面处理

    我在起前面的几篇随笔中,大概介绍了工作流的一些场景化处理,包括如何把具体业务表单组件化,并在查看和编辑界面中,动态加载组件内容,以及对于查看申请单的主页面,把审批.取消.发起会签.会签.批示分阅.阅办 ...

  3. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

  4. Vue表格中,对数据进行转换、处理

    众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...

  5. vue+element 表格formatter数据格式化并且插入html标签

    前言 vue中 element框架,其中表格组件,我既要行内数据格式化,又要插入html标签 一贯思维,二者不可兼得也 一.element 表格 数据格式化 demo <el-table-col ...

  6. 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理

    Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...

  7. pandas向表格中循环写入数据

    pandas向表格中循环写入多行数据 import pandas as pd def list_topic(total_num, str1): """ 生成多个主题 :p ...

  8. Excel—使用if(countif())表达式来筛选两个表格中相同的数据

    关注微信公众号:CodingTechWork,一起学习进步. 引言   在线上运维的过程中,遇到一个头疼的事情,有一些合作公司的数据直接从平台上down下来是一个excel,然后发到研发手里去数据库中 ...

  9. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

随机推荐

  1. ReactNative: 使用View组件创建九宫格

    一.简言 初学RN,一切皆新.View组件跟我们iOS中UIView类似,作为一个容器视图使用,它主要负责承载其他的子组件.View组件采用的是FlexBox伸缩盒子布局,通过对它的布局可以影响子组件 ...

  2. 使用Runtime的objc_copyClassNamesForImage和objc_getClassList获取类

    一.介绍 objc_copyClassNamesForImage:拷贝动态库类列表,也即当前工程下自己创建的所有类 objc_getClassList:获取所有类列表,也即当前工程下所有类(含系统类. ...

  3. pytest框架之rerunfailures失败重运行机制

    web自动化测试中,稳定性在整个测试运行中都至关重要,但不能保证测试脚本或者测试环境一直都能够稳定,它牵扯到诸多因素,在这里就不赘述,pytest框架相较于unittest的一大优势就在于拥有用例失败 ...

  4. Linux war包部署jenkins

    一.介绍Jenkins 1.Jenkins概念 Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,无论用的是什么平台.这是一个免费的源代码,可以处理任何类型的构建或持续集成.集成Je ...

  5. Java 实现 HtmlEmail 邮件发送功能

    引言 在平常的企业级应用开发过程中,可能会涉及到一些资讯通知需要传达,以及软件使用过程中有一些安全性的东西需要及早知道和了解,这时候在局域网之间就可以通过发送邮件的方式了.以下就是代码实现了: pac ...

  6. win7系统下安装Ubuntu18.04组成双系统

    最近在闲鱼上花了350大洋淘到了一台tinkpad sl510,这大概是一台发布于2009年的一台电脑了吧,处理器是酷睿二t440,2Gddr3的显卡,让我有点意外的是这台电脑的硬盘是7200转的32 ...

  7. PLSQL 12 安装、连接Oracle

    点击下载PLSQL,本次安装的PLSQL版本为12.0.7,建议安装64位. 下载PLSQL时,版本旁边会有个“Language pack”的链接,点击后左侧选择“Chinese”即可下载汉化包. 注 ...

  8. SqlServer中用@@IDENTITY取最新ID不准的问题

    最近遇到了一个SqlServer中用@@IDENTITY取最新ID不准的问题,经过在网上的一番查找,找到了如下资料,略作记录:"一个网友问我一个关于@@IDENTITY的问题.他的数据库中有 ...

  9. [b0005] Linux 系统常用操作命令

    1 Ubuntu 解压 hadoop@ssmaster:~$ -bin-hadoop2..tgz 联网安装程序包 sudo apt-get install php

  10. [20190821]关于CPU成本计算.txt

    [20190821]关于CPU成本计算.txt --//有人问链接http://blog.itpub.net/267265/viewspace-2653964/中CPU成本如何计算的,实际上一般在优化 ...