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);
})
)
}
},
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 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 热点速览」