vue table 里面 slot 的模板复用 slot-scope template v-for
vue table 里面 slot 的模板复用 slot-scope template v-for
需求
经常在table里面要有自定义列,但是会有相同的自定义列,这个时候又不想写很多一样的template,就可以用这种方式
代码
<template :slot="slotName" v-for="slotName in [
'slotName1',
'slotName2',
'slotName3',
'slotName4'
]" slot-scope="{row, index}">
<AutoTipZen :key="slotName" :iTitle="row[slotName]">{{ toLine(row[slotName]) }}</AutoTipZen>
</template>
代码转配置
刚才那个数组可以从columns的数组里面获取
<template
:slot="slotName"
v-for="slotName in columns.filter(item => item.slotType === 'autoTip').map(item => item.slot)"
slot-scope="{row, index}">
后记正式代码
<template :slot="slotName"
v-for="slotName in columns.filter(m => m.slotType === 'textarea').map(m => m.slot)"
slot-scope="{row, index}">
<AutoTipZen :key="slotName" :iTitle="row[slotName]">{{ toLine(row[slotName]) }}</AutoTipZen>
</template>
columns数组
[
{
title: 'fieldName',
slot: 'slotName',
slotType: 'textarea'
},
{
title: 'fieldName2',
slot: 'slotName2',
slotType: 'textarea'
},
]
函数
toLine (txt) {
return txt.replace(/\r/g, '').replace(/\n/g, '')
},
总结
原理基本上是这个意思,就拆分了业务逻辑,并且可以组合使用。
vue table 里面 slot 的模板复用 slot-scope template v-for的更多相关文章
- vue & table with operation slot
vue & table with operation slot seed demo <!-- @format --> <template> <seed ref=& ...
- Vue.js 作用域、slot用法(单个slot、具名slot)
作用域 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板: <child-component> {{message}} <child-component&g ...
- Vue快速上门(3)-组件与复用
VUE家族系列: Vue快速上门(1)-基础知识 Vue快速上门(2)-模板语法 Vue快速上门(3)-组件与复用 01.component组件 1.1.component基础知识 组件是可以复用的V ...
- 45.VUE学习之--组件之父组件使用scope定义子组件模板样式结构实例讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- legend3---10、vue与lavarel的blade模板加jquery页面开发方式比较
legend3---10.vue与lavarel的blade模板加jquery页面开发方式比较 一.总结 一句话总结: lavarel的blade模板加jquery:速度快一点:速度快一点,页面加载数 ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑
(1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(一): 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作
相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...
- vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开 ...
- Vue学习一:{{}}html模板使用方法
本文为博主原创,未经允许不得转载: 之前自学了vue,在项目中应用了vue,由于是第一次使用,感觉非常强大,使用也非常方便,趁有时间,总结一下vue学习过程中 各个指令的使用方法,只要掌握了vue的指 ...
- vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控
流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...
随机推荐
- 一键式文本纠错工具,整合了BERT、ERNIE等多种模型,让您立即享受纠错的便利和效果
pycorrector一键式文本纠错工具,整合了BERT.MacBERT.ELECTRA.ERNIE等多种模型,让您立即享受纠错的便利和效果 pycorrector: 中文文本纠错工具.支持中文音似. ...
- 人工智能创新挑战赛:助力精准气象和海洋预测Baseline[3]:TCNN+RNN模型、SA-ConvLSTM模型
"AI Earth"人工智能创新挑战赛:助力精准气象和海洋预测Baseline[3]:TCNN+RNN模型.SA-ConvLSTM模型 1.气象海洋预测-模型建立之TCNN+RNN ...
- RabbitMQ高级知识(消息可靠性,死信交换机,惰性队列,MQ集群)
服务异步通信-高级篇 消息队列在使用过程中,面临着很多实际问题需要思考: 1.消息可靠性 消息从发送,到消费者接收,会经历多个过程: 其中的每一步都可能导致消息丢失,常见的丢失原因包括: 发送时丢失: ...
- SQL布尔盲注
看不到回显时使用盲注 布尔盲注 在进行SQL注入时,web页面仅返回True和False 布尔盲注会根据web页面返回的True或者False信息,对数据库中的信息,对数据库中的信息进行猜解,并获取数 ...
- Oracle 19c RAC自动应用RU补丁过程
笔者好久没有使用opatchauto打过补丁了,搜了下自己的历史随笔,上次opatchauto打补丁的记录还是Oracle 11g版本: Oracle 11g RAC 自动应用PSU补丁简明版 而11 ...
- Ubuntu 20.04 出现 SSL_connect: error:1425F102 .. unsupported protocol问题的解决
在安装完Ubuntu 20.04后, 这个问题影响了好几个软件, 包括MySQL Workbench, Openfortigui等等, 出现的错误都是 ERROR: SSL_connect: erro ...
- 【Unity3D】边缘检测特效
1 边缘检测原理 边缘检测的原理是:检测每个像素周围的像素亮度差,如果亮度差异较大,就将该像素识别为边缘,并进行边缘着色. 本文完整资源见→Unity3D边缘检测特效. 使用过卷积神经网络 ...
- spring boot整合spring cloud
本项目还是通过卖票和买票模块来介绍spring cloud. 1.新建服务注册模块:eureka-server 1.1 配置pom <?xml version="1.0" e ...
- JavaCV解决deprecated pixel format used, make sure you did set range correctly 打印问题
虽然知道这个是原因,但有时候即使换了格式也还是打印,简直让人抓狂,就是不想打印这个怎么办呢? 其实很简单,只需要加上一行代码(这行代码虽然是C语言风格的,但是它确实是加在Java代码里的): //只打 ...
- MinGW 和 MSVC
在 Winodws 上编译通常会用到这两种工具链 MinGW(Minimalist GNU for Windows) 通常用于跨平台开发,可以编译出在 Windows 系统上运行的 .exe 程序 M ...