Vue Render自定义tabled单元格内容
解决问题
只举一个例子(我正好需要用到的)
在写中后台时, 如果对 表格组件 再度封装了, 比如这样的
以element-ui 为例:
<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>
对html数据化, 封装成一个组件.
// complex-table.vue
<template>
<el-table
:data="list"
style="width: 100%;"
>
<el-table-column v-for="col in columns" :key="col.prop" v-bind="col"></el-table-column>
</el-table>
</template>
<script>
export default {
props: {
columns: Array
}
}
</script> --------------------------
// index.vue
<template>
<div class="box_container">
<complex-table
:columns="tableColumns"
/>
</div>
</template>
<script>
export default {
data() {
return {
tableColumns: [
{ label: '日期', prop: 'sn', align: 'center' },
{ label: '姓名', prop: 'phone', align: 'center' },
{ label: '地址', prop: 'address', align: 'center' }
]
}
}
}
</script>
那么问题来了, 如果我要在table中加入头像列, 但是后端返回的是url地址, 你又怎么办呢,你可以这样
// complex-table.vue
...
<el-table>
<el-table-column v-for="col in columns" :key="col.prop" v-bind="col">
<template slot-scope="scope">
<template v-if="col.prop==='avatar'">
<el-avatar :src="row.avatar" />
</template>
<template v-else>
<span>{{ scope.row[col.prop] }}</span>
</template>
</template>
</el-table-column>
</el-table>
... // index.vue
...
data() {
return {
tableColumns: [
{ label: '头像', prop: 'avatar', align: 'center' },
{ label: '日期', prop: 'date', align: 'center' },
{ label: '姓名', prop: 'name', align: 'center' },
{ label: '地址', prop: 'address', align: 'center' }
]
}
}
...
万一又是 <el-tag>
标签, el-button
不能一直v-if吧
或许也可以使用 <component :is="**" v-bind="**" >
这种形式, 如果遇到方法传值又感觉差点什么,差scope传值了
解决方案
使用函数式组件, 可灵活使用, 原理跟 valueFormat 类似, 不废话直接上代码
新建文件 columnRender.js
/*
* @Description: 函数式组件渲染单元表格
* @Author: 仲灏<izhaong 164165005@qq.com>
* @Date: 2020-09-16 15:33:25
* @LastEditors: 仲灏<izhaong 164165005@qq.com>
* @LastEditTime: 2020-09-16 15:47:23
*/
export default {
functional: true,
props: {
row: Object,
render: Function
},
render(h, ctx) {
const params = {
row: ctx.props.row
} return ctx.props.render(h, params)
}
}
// complexTable
...
<template v-else-if="'render' in col">
<!-- <component :is="col.tag" v-bind="col.attrs">{{ col.tagValue }}</component> -->
<Render :row="row" :render="col.render" />
</template>
... // index.js
tableColumns: [
{ label: 'name', prop: 'name', align: 'center' },
{ label: '是否有效', prop: 'isValid', align: 'center', render: (h, { row }) => {
return h('el-tag', { attrs: { type: row.isValid ? 'success' : 'info' }}, row.isValid ? '有效' : '无效')
} }
]
结语
第一次bb这个多话, 之前直接就啪~ 贴代码了.
当然如果封装的组件足够强大, 能够兼顾涵盖该项目大部分业务, 就可以把组件当做页面使用, 全部使用纯数据驱动, 当然你的业务相似度要高
Vue Render自定义tabled单元格内容的更多相关文章
- Vue. 之 Element table 单元格内容隐藏
Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...
- params.row[params.column.key] vue h函数 当前单元格 h函数 div 属性 值或数组 render
params.row[params.column.key] vue h函数 当前单元格 h函数 div 属性 值或数组 render
- Asp.net导出Excel续章(自定义合并单元格,非Office组件)
结合上次写的导出Excel方法,这次上头要求我将列头进行一下合并 以前的效果: 改进后的效果: 在上篇文章中写到了Excel的导出方法,这次为了避免在生产环境中使用Office组件,服务器各种权限配置 ...
- js如何实现动态显示表格数据(点奇数显示奇数单元格内容)
js如何实现动态显示表格数据(点奇数显示奇数单元格内容) 一.总结 一句话总结: 1.动态指定表格中每个单元格的id,然后通过id可以获取每个单元格,然后对里面的innerHTML进行赋值. 2.弄了 ...
- WinForm中DataGridView复制选中单元格内容解决方案
WinForm中DataGridView鼠标选中单元格内容复制方案 1.CTR+C快捷键复制 前提:该控件ClipboardCopyMode属性设置值非Disable: 2.鼠标框选,自定义代码实现复 ...
- JavaScript动态改变表格单元格内容的方法
本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...
- POI教程之第二讲:创建一个时间格式的单元格,处理不同内容格式的单元格,遍历工作簿的行和列并获取单元格内容,文本提取
第二讲 1.创建一个时间格式的单元格 Workbook wb=new HSSFWorkbook(); // 定义一个新的工作簿 Sheet sheet=wb.createSheet("第一个 ...
- js实现表格中不同单元格内容的替换(不同浏览器的节点属性兼容问题)
-------> 效果:点击右下角单元格,左下角单元格内容被替换成和左上角相同,如上图所示. 实现方式:分别获取各个节点,并将左边节点的内容修改成左上方节点的内容. 代码: 注意的地方: ...
- Excel单元格内容太多会覆盖遮住下一单元格范围
Excel单元格内容太多会覆盖遮住下一单元格范围分步阅读 Excel中的单元格内容,有着不同的对齐方式.用户可根据自己的需求,在处理数据的时候,自行设置所需要的对齐方式. 当您在处理数据的时候,如果设 ...
随机推荐
- 使用树莓派搭建LoRaWAN网关并接入腾讯云物联网开发平台
安装树莓派环境 制作镜像 下载img文件烧录器 传送门:img文件烧录器地址,下载完成之后双击安装 下载镜像文件 传送门:树莓派系统镜像 推荐下载这个版本的img,因为有桌面,并且大小适中. 下载完之 ...
- 不安装证书如何通过模拟器+Fiddler抓包APP的HTTPS请求?
模拟器抓取https方法 说明:为了解决安卓手线上不能抓取https请求,以下整理通过模拟器抓取https请求方法如下:前置条件:安卓模拟器:夜神抓包工具:Fiddler汉化中文升级版1无需FIDDL ...
- Mybatis 循环删除/插入
<foreach collection="array" open="(" separator="," close=")&qu ...
- Nginx和FastDfs完整配置过程
借鉴(https://blog.csdn.net/qq_34301871/article/details/80060235) 1.unknown directive "ngx_fastdfs ...
- vue项目打包配置多个测试环境与生产环境,用npm命令打出不同的资源包。
1.找到package.json文件,找到script节点.再新增一个新的脚本命令 test 2.修改prod.env.js配置文件,npm_lifecycle_event代表返回当前执行的脚本名称, ...
- Hbase写入流程图
写入流程图
- RabbitMQ系列随笔——介绍及安装
一.RabbitMQ介绍 RabbitMQ是由erlang开发的AMQP(Advanced Message Queuing Protocol)的开源实现.他是高级消息队列协议,是应用层协议的一个开放标 ...
- “计数质数”问题的常规思路和Sieve of Eratosthenes算法分析
题目描述 题目来源于 LeetCode 204.计数质数,简单来讲就是求"不超过整数 n 的所有素数个数". 常规思路 一般来讲,我们会先写一个判断 a 是否为素数的 isPrim ...
- Qt 多语言转换
Qt QTranslator 实现多语言转换(转载) 1.在*.pro文件里面添加TRANSLATIONS += English.tsChinese.ts根据自己想要添加多少种语言和什么语言视情况 ...
- Spring_mybatis结合之1.1
Spring和mybatis结合,Spring管理容器,连接数据库等,mybatis负责管理sql语句,sql的入参和出参等 三种方法: 1.原始dao开发(不怎么用,好奇的宝宝可以自己搜搜.是dao ...