iview 下拉select样式_iview table表格中添加select选择器以及dropdown下拉菜单

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斤"

}</