对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架。而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查。

element-ui中table的使用

——当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽。

相当于是要枚举出所有需要展示的参数,这种情况在参数比较少的情况下是比较方便的,但是在有很多数据或者参数不确定的情况下,这种枚举的方式就不太适合了。

 <template>
<el-table
:data="tableData"
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>
</template>

循环渲染出element-ui中table表格内容

table表格分为两个部分,一部分值thead表头,还有是tbody主体部分,所以可以分别循环出来,看代码:

<el-table
:data="rightsDate" <!-- 表格里面的数据源 -->
border
stripe
height="713"
>
<el-table-column
v-for="info in rightHeader" :key="info.key"
<!-- 设置表头数据源,并循环渲染出来,property对应列内容的字段名,详情见下面的数据源格式 -->
:property="info.key"
:label="info.label"
>
<template slot-scope="scope">
{{scope.row[scope.column.property]}} <!-- 渲染对应表格里面的内容 -->
</template>
</el-table-column>
<el-table-column label="启用状态">
<template slot-scope="scope">
<el-switch
v-model="scope.row.ifUse"
:active-color="ACT_COLOR"
:inactive-color="INACT_COLOR">
</el-switch>
</template>
</el-table-column>
</el-table>
模拟数据源展示:
rightHeader: [
{
label: '编码',
key: 'code'
},
{
label: '姓名',
key: 'name'
},
{
label: '权限描述',
key: 'description'
}
],
rightsDate:[{
"id":221,
"code": "01",
"name": "西药开立权限",
"description": "医生对西药处方权限",
"ifUse":"0"
}, {
"id":222,
"code": "02",
"name": "草药开立权限",
"description": "医生对草药处方权限",
"ifUse":"0"
}, {
"id":223,
"code": "03",
"name": "成药开立权限",
"description": "医生对成药处方权限",
"ifUse":"0"
}, {
"id":224,
"code": "04",
"name": "麻醉开立权限",
"description": "医生对麻醉处方权限",
"ifUse":"0"
},
{
"id":225,
"code": "05",
"name": "精一开立权限",
"description": "医生对精一处方权限",
"ifUse":"0"
}
]

展示结果:

vue如何循环渲染element-ui中table内容的更多相关文章

  1. Element Ui中table实现表格编辑效果

    主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...

  2. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  3. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  4. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  5. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

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

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

  7. element ui 中的 resetFields() 报错'resetFields' of undefined

    每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...

  8. Laravel 6.X + Vue.js 2.X + Element UI +vue-router 配置

    Laravel 版本:6.X Vue 版本:2.X Laravel配置: Laravel使用的是Laragon安装 选择Laravel:接下来弹出框,输入项目名,laravel会自动创建一个数据库,数 ...

  9. element ui中的一些小技巧

    最近写公司的项目,这项目是vue和element ui搭建的, 做的是一套电力系统的管理平台.  遇到一个小麻烦,用过element ui 的都知道,使用element ui 弹框,点击空白处,默认是 ...

随机推荐

  1. jQuery中的基本选择器,id,class,元素,通用

    常用的基本选择器: 后续的补充选择器 为了后面看的方便,我们先将body中的内容展示出来: <body> <p> 账号:<input type="text&qu ...

  2. IO 单个文件的多线程拷贝

    package FileCopyThread; //自建的包,根据个人调整 import java.io.File; import java.io.FileNotFoundException; imp ...

  3. [TimLinux] docker CentOS7入门——服务(2)

    1. 服务含义 分布式应用中,应用的不同部分即称为“服务”,视频网站是一个分布式应用,包含有:数据的存储,视频的转码,前端展示等部分,对应的这些部分即称为相应的服务.docker平台中,定义.运行和扩 ...

  4. UESTC1961-咸鱼睡觉觉

    咸鱼睡觉觉 Time Limit: 1000 MS     Memory Limit: 64 MB Submit Status 咸鱼要睡觉觉了! 但那群咕咕有点烦. 咸鱼决定要赶走一些咕咕,使得他们不 ...

  5. Python3 函数小练习

    函数小练习 第一题 现有文件info.txt, 其内容如下: alpha male 18 1000 bravo male 28 2000 charlie female 38 3000 delta fe ...

  6. 【前端知乎系列】ArrayBuffer 和 Blob 对象

    本文首发在 个人博客 更多丰富的前端学习资料,可以查看我的 Github: <Leo-JavaScript>,内容涵盖数据结构与算法.HTTP.Hybrid.面试题.React.Angul ...

  7. 伸缩容器-display:flex设置flex属性的理解

    1.flex属性 1.1 flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto. flex-grow: 定义项目的放大比例,默认为0,即 ...

  8. Python3、setuptools、Pip3安装详解

    Python3.setuptools.Pip3安装详解 2017年08月19日 18:58:47 安静的技术控 阅读数:26002    版权声明:本文为博主原创文章,未经博主允许不得转载. http ...

  9. drf源码分析系列---权限

    权限的使用 全局使用 from rest_framework.permissions import BasePermission from rest_framework import exceptio ...

  10. CCF-CSP题解 201412-4 最优灌溉

    \(kruskal\),有兴趣\(heap\_prim\).\(stl\ pq\)实现复杂度相同. #include <bits/stdc++.h> using namespace std ...