iview之——table中嵌套input、select等
2024-10-19 17:28:26
使用iview在table中嵌入button是比较常见的需求,但是在table中嵌入input或者select你是否考虑过呢?本文用实例介绍input和select在table中的嵌套。
理解table如何嵌套input、select首先要理解vue的render函数可以参考:vue render函数介绍。当然,不理解直接Ctrl + C也是可以使用的 ^_^
在iview的官方文档中,table插入Button的例子如下:
1 {
2 title: 'Action',
3 key: 'action',
4 width: 150,
5 align: 'center',
6 render: (h, params) => {
7 return h('div', [
8 h('Button', {
9 props: {
10 type: 'primary',
11 size: 'small'
12 },
13 style: {
14 marginRight: '5px'
15 },
16 on: {
17 click: () => {
18 this.show(params.index)
19 }
20 }
21 }, 'View')
22 ]);
23 }
由文档得知,table组件提供一个api:render函数
,可以自定义渲染当前列,包括渲染自定义组件,它基于 Vue 的 Render 函数。
参数解读:
h: vue Render函数的别名(全名 createElement)即 Render函数
params: table 该行内容的对象
props:设置创建的标签对象的属性
style:设置创建的标签对象的样式
on:为创建的标签绑定事件
所以代码中的render函数,即创建的一个div中包裹一个button按钮,同时给button设置了相关属性和绑定事件
那么如下图又该如何实现呢:
代码如下:
<template>
<div class="meeting">
<Table border :columns="columns" :data="data" :height="tableHeight"></Table>
</div>
</template>
<script>
export default {
name: "meeting",
data() {
let t = this
return {
tableHeight:'550',
columns: [
{
title: '责任人',
key: 'associated',
width: 100,
align: 'center',
},
{
title: '预计工时',
key: 'attendee',
width: 100,
align: 'center',
render:(h,params) => {
return h('Input',{
props: {
value:'',
size:'small',
},
on: {
input: (val) => {
t.data[params.index].estimateTime = val
}
},
})
}
},
{
title: '实际工时',
key: 'state',
width: 100,
align: 'center',
render:(h,params) => {
return h('Input',{
props: {
value:'',
size:'small',
},
on: {
input: (val) => {
t.data[params.index].actualTime = val
}
}, })
}
},
{
title: 'WorkHover状态',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('Select',{
props:{
},
on: {
'on-change':(event) => {
this.data[params.index].volumeType = event;
}
},
},
params.row.action.map((item) =>{
return h('Option', {
props: {
value: item.value,
label: item.name
}
})
})
)
}
}, ],
data: [
{
associated: '123',
action:[
{
value:0,
name:'select A'
},
{
value:1,
name:'select B'
},
]
},
{
associated: '123',
action:[
{
value:0,
name:'select A'
},
{
value:1,
name:'select B'
},
]
},
],
}
},
methods: {}
};
</script>
讲解:
这里是在table组件中嵌入了iview的input和select组件
值得注意的是,1、on是table的触发事件,不是table内嵌套组件的触发事件,2、对于select组件,通过map
函数就可以代替v-for的渲染(注:如果数据中的value值为空,select将不被渲染)
最新文章
- iOS遍历相册中的图片
- archive for required library...
- Win7 + ubuntu14.04 双系统安装教程
- phpcms二层栏目下拉和当前栏目高亮
- LeetCode | Unique Paths【摘】
- hdu So Easy!
- 教你50招提升ASP.NET性能(十六):把问题仍给硬件而不是开发人员
- Gulp自动化构建工具的简单使用
- IE10以下兼容H5中的placeholder 以及改变它默认颜色
- 编辑器开发之 Range 范围对象的学习
- 新加坡100M带宽,国内延迟70ms,仅800元
- 【SoftwareTesting】Lab 2
- CSS字体样式属性
- SpringMVC的缓存对静态资源的影响 304 Not Modified
- SqlServer索引碎片
- [转][C#]拆分参数对
- php的ob缓存详解
- (动态规划)Max Sum Plus Plus--hdu--1024
- [JS] js数字位数太大导致参数精度丢失问题
- FileZilla Server ftp 服务器下通过alias别名设置虚拟目录(多个分区)
热门文章
- mysql依据某一张表的字段,查询出对应的表所在的数据库
- nacos 使用 servlet 异步处理客户端配置长轮询
- Vue中解决路由切换,页面不更新的实用方法
- 合并流SequenceInputStream
- 解决sql语句中参数为空(null)不会更新参数的问题
- CSS去除点击按钮时出现的虚线框
- [19/05/14-星期二] HTML_body标签(列表标签和图片标签)
- 面试一个 3 年 Java 程序员,一个问题都不会!
- 初识STM8S105K心得!
- [BZOJ 3295] [luogu 3157] [CQOI2011]动态逆序对(树状数组套权值线段树)