目的是要做一个表格中的下拉框来表示状态(是、否),可以选择下拉框内容达到修改表格内的数据
下面是在Table
中实现select
效果的代码
{
title: '状态',
width:150,
key: 'stage',
render: (h, params) => {
return h('Select', {
props:{
value: params.row.stage,//绑定数据
transfer: true,//不受表格高度影响
},
on: {
'on-change':(event) => {
this.dataList[params.index].stage= event;//获取选中项
this.id= params.row.id;//获取当前行的id
this.stage= event;//获取选中项的value
this.upDate();//根据选择的数据执行修改方法
}
},
},
[
h('Option',{
props: {
value: '0'
}
},'是'),
h('Option',{
props: {
value: '1'
}
},'否')
]);
},
},
如果select
下拉框内容需要很多数据或者是查询的特定数据,就是不要写死的数据
可以把
[
h('Option',{
props: {
value: '0'
}
},'是'),
h('Option',{
props: {
value: '1'
}
},'否')
]
替换成
this.dataList.map((val)=>{ //dataList就是要展示的数组
return h('Option', {
props: {value: val.value}
},val.label);
})
注意:
执行修改方法后,不要忘记刷新表格中的数据,否则再修改不生效。
效果图: