iview table表格中添加select选择器以及dropdown下拉菜单
1.需求
在上篇的文章iview table表格的自定义样式的基础上，也就是一张table上的某一列改为select框
其中一个option选项，hover或click可以伸展出另外一个选择框
反显
2.设计
查了查资料，就是在table的列里面，使用render函数
使那个可以伸展出另一个的选择框作为一个下拉菜单dropdown，若还是写为 select或者option是不能正常展示的
或者可以使用cascader级联选择(这个应该是挺好的，但是我还没有去尝试过)
3.实践
之前的代码不变
在其中一列中加入render函数
{
title: ‘香蕉’,
key: ‘banana’,
render: (h, params) => {
var data = this.data3;
return h(‘div’, [
h(
“Select”,
data.map(function (item) {
//默认情况下都为select中的option选项
if (item.value !== ‘three’) {
return [h(
“Option”,
{
props: {
value: item.value,
key: item.value
}
},item.label)]
}
else {
//当value为three的时候，将其置为dropdown，hover上去可以显示下拉菜单
return h(‘Dropdown’, {props: {trigger: “hover”,placement: ‘right-start’}},
[
h(‘DropdownItem’,[
item.label,
h(‘Icon’,
{
props: {
type: “ios-arrow-forward”
}
})
]) ,
h(‘DropdownMenu’,{
slot:”list”//应该是表示插入进来的数据为list对象
},
item.children.map(function (child) {
console.log(child)
//要用option因为这些选项是可以被选中的
return h(‘Option’, {
props: {
value: child.value,
key: child.value
}
}, child.label)
})
)
])
}
})
)]);
}
}
render函数下拉框用到的数据
data3: [
{
value: “one”,
label: “一斤”,
children: []
},
{
value: “three”,
label: “三斤”,
children: [
{
value: “divideOne”,
label: “一份3斤”
},
{
value: “divideTwo”,
label: “两份各1.5斤”
}</