iview的table组件中加入超链接组件,可编辑组件,选择组件,日期组件
这篇文章主要介绍了iview的table组件中使用选择框,日期,可编辑表格,超链接等组件。
1.select选择组件
// tableColumn数组响应对象需要传入一个固定的option数组,如果该数组是异步动态生成的该组件不能正常渲染,因为在获取option数组之前table渲染时option是undefined。
supportSelect(item) {
item.render = (h, params)=>{
return h('Select', {
props: {
value: params.row[params.column.key],
size: 'small',
transfer: true
},
on: {
'on-change': (val)=>{
this.insideTableData[params.index][params.column.key] = val
}
},
},item.option.map(item=>{
return h('Option', {
props: {
value: item.value || item,
label: item.label || item
}
}, item.label || item)
}))
}
return item
}
2.可编辑表格
// 可编辑表格使用了contenteditable属性,使得表格编辑更加简单干净
supportEdit(item, index){
item.render = (h, params)=>{
return h('div', {
style: {
padding: '4px 0',
width: '100%'
},
props: {
value: this.insideTableData[params.index][params.column.key]
},
attrs: {
contenteditable: this.editable,
title: '点击可编辑'
},
on: {
'blur': evt=>{
evt.target.value = evt.target.innerText || params.row[params.column.key]
params.row[params.column.key] = evt.target.innerText
this.insideTableData[params.index][params.column.key] = evt.target.innerText
}
}
}, params.row[params.column.key])
}
return item
}
3.日期组件
// 使用iview的DatePicker组件渲染就行
supportDate(item){
item.render = (h, params)=>{
return h('DatePicker', {
props: {
clearable: false,
placeholder: '请选择日期',
value: params.row[params.column.key],
type: 'date',
format: 'yyyy-MM-dd',
size: 'small'
},
on: {
'on-change': (val)=>{
this.insideTableData[params.index][params.column.key] = val
}
}
})
}
return item
}
4.表格中添加超链接
// 这里的handleLink方法是在table组件中定义好的使用$emit让父组件调用
supportLink(item){
item.render = (h, params)=>{
return h('a', {
style: {
textDecoration: 'underline'
},
on: {
'click': ()=>{
this.handleLink(params.row)
}
}
}, params.row[params.column.key])
}
return item
}
iview的table组件中加入超链接组件,可编辑组件,选择组件,日期组件的更多相关文章
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- vue组件中使用iframe元素
需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...
- Source Qualifter组件中sqlquery过长导致截取
问题:Source Qualifter组件中sqlquery过长导致截取原因:Source Qualifter组件中sqlquery可以接受的最长字符数是32767个字符,超过这个数字会导致截取解决方 ...
- Vue系列之 => 组件中的data和methods
使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- Vue组件中引入jQuery
一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...
- vue框架之自定义组件中使用v-model
通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...
- 微信小程序在组件中获取界面上的节点信息wx.createSelectorQuery
节点信息查询 API 可以用于获取节点属性.样式.在界面上的位置等信息. 最常见的用法是使用这个接口来查询某个节点的当前位置,以及界面的滚动位置. 示例代码: const query = wx.cre ...
- VUe.js 父组件向子组件中传值及方法
父组件向子组件中传值 1. Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...
- vue组件中的data为什么是函数?
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
随机推荐
- Oracle 查询表分区相关信息
Oracle 查询表分区相关信息 --表分区 --1,分区表信息 -- (1)显示数据库所有分区表的信息 select * from DBA_PART_TABLES a where a.owner=u ...
- (转)Darknet模型与Tensorflow模型相互转换
目前darknet框架下的模型训练都是在C环境下训练的,难免较为晦涩,如果能将模型转换到Tensorflow环境下完成模型的训练,在将训练好的权重转为Darknet可以识别的权重部署到实际应用中.这样 ...
- Dart对象和类
/* 面向对象编程(OOP)的三个基本特征是:封装.继承.多态 封装:封装是对象和类概念的主要特性.封装,把客观事物封装成抽象的类,并且把自己的部分属性和方法提供给其他对象调用, 而一部分属性和方法则 ...
- openresty开发系列16--lua中的控制结构if-else/repeat/for/while
openresty开发系列16--lua中的控制结构if-else/repeat/for/while 一)条件 - 控制结构 if-else if-else 是我们熟知的一种控制结构.Lua 跟其他语 ...
- Mockplus更快更简单的原型设计
更快更简单的原型设计 https://www.mockplus.cn/ Mockplus,更快更简单的原型设计工具.快速创建原型,一键拖拽创建交互,团队协作省事省力.微软.华为.东软.育碧.Oracl ...
- QML注意color小写
1.用的时候大小写一样的 如: color="#3D3D3D" 和 color="#3d3d3d"都是同一个颜色 2.判断的时候,QML默认是小写 如:if(c ...
- ORA-02287: sequence number not allowed here问题的解决
当插入值需要从另外一张表中检索得到的时候,如下语法的sql语句已经不能完成该功能:insert into my_table(id, name) values ((select seq_my_table ...
- 【计算机视觉】OpenCV篇(6) - 平滑图像(卷积/滤波/模糊/降噪)
平滑滤波 平滑滤波是低频增强的空间域滤波技术.空间域滤波技术即不经由傅立叶转换,直接处理影像中的像素,它的目的有两类:一类是模糊:另一类是消除噪音.空间域的平滑滤波一般采用简单平均法进行,就是求邻近像 ...
- DB2使用MERGE INTO语句实现西虹市首富的新增及更新操作
首先我们新建一张名为XIHONGSHISHOUFU的表,这张表是评委会初步评选出的西虹市首富的候选人员,下面的SQL语句包含建表和插入数据的部分: CREATE TABLE XIHONGSHISHOU ...
- Linux下,postgreSQL的查看与重启
查看命令:ps aux | grep postgresnetstat -npl | grep postgres 方法1: #su - postgres $pg_ctl restart 方法2: #su ...