Iview table嵌套select 多选以后批量编辑

最新推荐文章于 2025-06-10 14:54:33 发布

luguz

最新推荐文章于 2025-06-10 14:54:33 发布

阅读量676

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： view design javascript 前端

本文链接：https://blog.csdn.net/persist_z/article/details/125926464

web前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue的iview框架中利用Select组件和Table进行交互，特别是关注在外置按钮下批量设置Select选中值的实现方式。通过Table的render方法嵌套Select，并监听'onChange'事件来更新数据。同时，文章提到了在watch中观察selectNode的变化，以批量修改Table中的数据。此外，还强调了在Option组件中设置label的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在iview 当中使用 select选择，外置一个按钮可以批量操作select的值
在这里插入图片描述使用table 的render嵌套时需要注意option的值设置label

{
	title: "命名空间",
	key: "nodeSpace",
	minWidth: 120,
	sortable: false,
	render: (h, params) => {
		return h('Select', {
		props: {
		value: params.row.nodeSpace,//绑定数据
		                   transfer: true,//不受表格高度影响
		},
		on: {
		'onChange': (event) => {
		this.flashDiskData[params.index].nodeSpace = event;
		this.flashDiskSelect[params.index].nodeSpace = event;
		}
		},
		},
		this.allNode.map(function (type) { //这个数组需要在data中定义,里面是一个个对象,每个对象里面应当包含value属性(因为要用到)
		return h('Option', {
		props: {
		value: type.minerId,
		label: type.minerId,
		key: type.minerId
		}
		}, type);
		})
		)
	}
},

批量设置值时更改绑定值会触发查找改变

watch: {
selectNode: function(newVal, oldVal) {
this.flashSelectList.forEach((v,i)=>{
this.flashSelectList[i].nodeSpace = newVal
this.flashDiskData.forEach((v1,i1)=>{
if(v.diskSerial == v1.diskSerial){
this.flashDiskData[i1].nodeSpace = newVal
v1._checked = true
return
}
})
})
console.log(this.flashSelectList)
}


}

不设置lable 在这里插入图片描述