随笔 - 144  文章 - 0  评论 - 2  阅读 - 19万

iview中在table组件中添加select(以及不成功的问题处理)

普通模式
{
     title: '午饭选择',
     key: 'lunch',
     width: 200,
     align: 'center',
     render: (h, params) => {
         return h('Select', {
                 props:{
                     value : 1, //默认的值
                     transfer: true,  //select不受body显示,以免显示不出来
                 },
                 on: {
                     'on-change':(val) => { //选项改变发生的事件
                         console.log(val)
                     }
                 },
             },
             [
                 h('Option',{
                     props: {
                         value: '1'
                     }
                 },'黄焖鸡'),
                 h('Option',{
                     props: {
                         value: '2'
                     }
                 },'大排饭'),
                 h('Option',{
                     props: {
                         value: '3'
                     }
                 },'牛肉汤'),
                 h('Option',{
                     props: {
                         value: '4'
                     }
                 },'炒菜')
             ]
         );
     }
 },
数据填充模式
{
	title: '午餐选择',
	key: 'lunch',
	width: 200,
	align: 'center',
	render: (h, params) => {
	    return h('Select', {
			    props:{
					value : this.data[params.index].lunch,  //数据的双向绑定 data是定义好的数据
					transfer: true,
			    },
			    on: {
					'on-change':(event) => { //select改变事件
					    this.data[params.index].lunch = event;
					}
			    },
			},
			this.lunch_array.map(function(val,key){ //lunch_array是午餐的集合数组
			    return h('Option', {
					props:{
					    value:val.value
					}
			    }, val.text);
			})
	    )
	}
},
posted on   黑夜开发者  阅读(114)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾(3.3-3.9)
· AI 智能体引爆开源社区「GitHub 热点速览」
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示