vue中用table_element-ui中的 table 组件在vue中的使用
经常使用 element-ui 的小伙伴应该对 el-table 组件非常熟悉,通常它长下面这个样子:
但是我们可以使用使用 v-for 来优化模版中的 el-table-column
v-for="{ prop, label } in colConfigs"
:key="prop"
:prop="prop"
:label="label">
export default {
data () {
this.colConfigs = [
{ prop: 'date', label: '日期' },
{ prop: 'name', label: '姓名' },
{ prop: 'address', label: '地址' }
]
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}]
}
}
}
这样做的好处在于,如果想再增加一列,完全可以不用动 template,只需要简单的在 this.colConfigs 这个数组中增加一个配置项 { prop: 'xxx', label: 'xxx' } 即可
如果我们即想要简单的属性可以直接加个配置项渲染出来,又希望复杂的渲染能在模版中写出来,要怎么实现呢?---巧用 slot,为 el-table 封装一层
我们先来看一下封装的组件 my-table:
// my-table.vue
export default {
props: ['colConfigs', 'data']
}
这个封装实际上就是把前面的 colConfigs 作为一个 prop 传入,但是跟上面例子有一点不同的是,配置项中多了一个 slot 属性,通过这个属性,我们就可以像文章最开始那样在模版中写了,用法如下:
:data="tableData"
:col-configs="colConfigs">
查看
export default {
data () {
this.colConfigs = [
{ prop: 'date', label: '日期' },
{ prop: 'name', label: '姓名' },
{ prop: 'address', label: '地址' },
// 模版中的元素需要对应的有 slot="opt" 属性
{ slot: 'opt' }
]
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}]
}
}
}
现在我们想要增加一个列,只要加个配置项,或者加个 slot ,完美~
等等,假设我的 table 中有几列渲染比较复杂,那几列又都比较相似,像下面这种:
:data="tableData"
:col-configs="colConfigs">
{{ row['change'] > 0 ? '+' + row['change']: row['change'] }}
{{ row['trend'] > 0 ? '+' + row['trend']: row['trend'] }}
这又重复写模版了…
使用 :is=”component”
我们可以为配置项再增加一个属性 component, 用户可以指定 component 属性来特殊处理某列,实现如下:
// my-table.vue
v-else-if="colConfig.component"
:is="config.component"
:col-config="colConfig">
export default {
props: ['colConfigs', 'data']
}
然后上面的例子就可以改写成:
:data="tableData"
:col-configs="colConfigs">
const PrefixPlusText = {
props: ['colConfig'],
template: `
{{ parseInt(row[colConfig.prop]) > 0 ? '+' + row[colConfig.prop] : row[colConfig.prop] }}
`
}
export default {
data () {
this.colConfigs = [
{ prop: 'change', label: '变化' component: PrefixPlusText },
{ prop: 'name', label: '趋势', component: PrefixPlusText },
]
return {
tableData: [{
change: '12%',
trend: '10%
}, {
change: '-12%',
trend: '-10%'
}]
}
}
}
总结
table 作为数据展示组件,在日常开发中经常被用到,通过这篇文章,可以看到结合 vue 的 slot/component 特性,做一层封装,可以大大简化 table 的使用,大部分时候只需写一个配置属性就可以了。
vue中用table_element-ui中的 table 组件在vue中的使用相关推荐
- Vue实战(六)通用Table组件
本文是Vue实战系列的第六篇文章,主要介绍Falcon项目中通用 Table 组件的开发和使用 .Falcon项目地址:https://github.com/thierryxing/Falcon 通用 ...
- antd 中的 table 组件设置 size 属性值为 small 后,表头背景色设置的解决方案
antd中的 table 组件的效果图: 默认size属性值是default : 当设置size="small" ; 表头的背景色没有了: 解决方案:在表格列里面设置 classN ...
- Table 组件构建过程中遇到的问题与解决思路
在 GearCase 开源项目构建 Table 组件的过程中.遇到了各式各样的问题,最后尝试了各种方法去解决这些问题. 遇到的部分问题 checkbox 的全选和半选问题 table 组件的排序请求方 ...
- vue中用table_Ant-Design-Vue中关于Table组件的使用
1. 如何自定义表格列头: Name const columns =[ { dataIndex:'name', // 自定义列表头,则不能设置title属性align:'left', slots: { ...
- uniapp中使用ucharts组件开发App中的折线图流程
uniapp中使用ucharts组件开发流程 官方ucharts地址 我是在uniapp使用echarts后发现在安卓手机app上不显示,所以使用ucharts来代替echarts 组件地址 在这里导 ...
- 用Vue写一个简单好看的菜单组件(Vue实战系列)
一.需求 实现一个左边栏菜单,菜单只包括两层: 点击出现水波纹效果: 激活效果:有一个绿球小点,标识激活的菜单,顶层菜单被激活时左边出现浅色激活标志: 二.实现 新建一个菜单组件whrmenu pro ...
- HTML中在table的td属性中嵌套table,为什么table居中?
我在表格table的td中又嵌套了一个table,但是table中的东西会呈现垂直居中的状态,那么问题是什么,是其table继承了vertical-align: inherit属性 vertical- ...
- android中怎么设置组件在LinearLayout中居中
如何在LinearLayout中让子控件居中? 首页.在LinearLayout加上 1 android:gravity="center" 再次.在子控件中加上 1 android ...
- ui做成html格式,使用element-ui的table组件时,渲染为html格式
背景 今天在作vue的项目时,使用到 element-ui 的 table 组件,使用富文本编辑器进行新增操做后,发现 html格式 并无被识别 html 缘由 在 element-ui 中,tabl ...
最新文章
- C# using static 声明
- 工作279:控制退回的逻辑修改
- 动态语言会淘汰静态语言吗?
- 王思聪又双被限制消费了!
- 7-2 求最大值及其下标编程总结
- 30个Python小游戏,上班摸鱼我能玩一天【内附源码】
- 机器学习为您揭秘雾霾怎么形成
- 【正点原子MP157连载】第二章 ATK-STM32MP157烧写系统-摘自【正点原子】STM32MP157快速体验
- 系统性的学会 Pandas, 看这一篇就够了!
- Bus hound USTS
- oracle年龄计算函数天 月 年,如何使用Oracle获得年龄,月份和天数的年龄
- 用php制作抖音视频去水印小程序?
- Excel辅助“校验”
- 阿里 OSS AccessDenied You are denied by bucket referer policy.
- 高盛报告引科技股暴跌 但如今并非 互联网泡沫2.0
- word如何批量更改公式字体
- mac 修改文件权限为777可读可写可执行
- 苹果宣布 2022 年 Apple 设计大奖得主
- 关闭、设置-Win 8 优化 -by小雨
- diy 扫地机器人 滚刷_扫地机器人滚刷和边刷分别有什么作用
热门文章
- 一个demo学会jquery mobile
- tshark/wireshark抓包小结
- linux-网络数据包抓取-tcpdump
- quartus仿真25:JK触发器构成的模7计数器(分析)
- JSP(二):JSP页面组成部分
- RHEL7忘记密码:修改root密码
- MySQL: 查看一次SQL的执行时间都花在哪些环节上
- QCon2016 上海会议汇总(1) - 前端技术实践
- JQuery-UI dialog hide属性的取值范围
- [转载] Sublime Text 3 插件 ClangFormat 格式化 C/C++版