iview table表格中添加select选择器以及dropdown下拉菜单
1.需求
- 在上篇的文章iview table表格的自定义样式的基础上，也就是一张table上的某一列改为select框
- 其中一个option选项，hover或click可以伸展出另外一个选择框
- 反显
2.设计
- 查了查资料，就是在table的列里面，使用render函数
- 使那个可以伸展出另一个的选择框作为一个下拉菜单dropdown，若还是写为 select或者option是不能正常展示的
- 或者可以使用cascader级联选择（这个应该是挺好的，但是我还没有去尝试过）
3.实践
- 之前的代码不变
<Table ref="selection" @on-selection-change="onSelect" height="700" no-data-text="暂无数据" :row-class-name="rowClassName" :columns="columns4" :data="data1" highlight-row></Table>
- 在其中一列中加入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斤"
}
]
},
{
value: "five",
label: "五斤"
}
]
-
发现额外弹出的下拉菜单被遮挡，又要改css了
下拉菜单被遮挡.png -
内嵌的css规定了它的宽度，我发现修改这个值是起作用的
修改下拉菜单css.png 不要去改变select框的宽度，而是去改变select的下拉框的宽度，否则会出现一些东西被覆盖的情况
/*调节选择框的下拉框的宽度*/
.ivu-select-dropdown{
min-width: 182px!important;
}
-
效果图
更改css效果图.png 反显的话需要在render函数中的select的props属性中指定value即可（value是和此demo中的value对应的，例如一斤是“one”,两份各1.5斤是"divideTwo"）
"Select",{
props:{
value:'divideTwo'
}
},
4.总结
- render函数iview上没介绍太多，需要去vue的官方文档上去看
- render函数的子元素怎么用括号括起来的，我也不太了解，不过一定要括对，否则根本不是你想要的格式
- 用cascader应该会更好，更方便
- 本人写的不好或者写错的地方，希望大神可以指出来，因为我真是初学者
附
<style>
/*外层table的border*/
.ivu-table-wrapper {
border:none
}
/*底色*/
.ivu-table td{
background-color: #182328;
color: #fff;
}
/*每行的基本样式*/
.ivu-table-row td {
color: #fff;
border:none
}
/*头部th*/
.ivu-table-header th{
color:#FFD3B4;
font-weight: bold;
background-color: #212c31;
border: none;
}
/*偶数行*/
.ivu-table-stripe-even td{
background-color: #434343!important;
}
/*奇数行*/
.ivu-table-stripe-odd td{
background-color: #282828!important;
}
/*选中某一行高亮*/
.ivu-table-row-highlight td {
background-color: #d63333!important;
}
/*浮在某行*/
.ivu-table-row-hover td {
background-color: #d63333!important;
}
/*调节选择框的下拉框的宽度*/
.ivu-select-dropdown{
min-width: 182px!important;
}
</style>
<template>
<div>
<Table ref="selection" @on-selection-change="onSelect" height="700" no-data-text="暂无数据" :row-class-name="rowClassName" :columns="columns4" :data="data1" highlight-row></Table>
<Button @click="handleSelectAll(true)">Set all selected</Button>
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
</div>
</template>
<script>
export default {
data () {
return {
selecteds: [],
columns4: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: '苹果',
key: 'apple'
},
{
title: '香蕉',
key: 'banana',
render: (h, params) => {
var data = this.data3;
return h('div', [
h(
"Select",{
props:{
value:'divideTwo'
}
},
data.map(function (item) {
if (item.value !== 'three') {
return [h(
"Option",
{
props: {
value: item.value,
key: item.value
}
},item.label)]
}
else {
return h('Dropdown', {props: {trigger: "hover",placement: 'right-start'}},
[
h('DropdownItem',[
item.label,
h('Icon',
{
props: {
type: "ios-arrow-forward"
}
})
]) ,
h('DropdownMenu',{
slot:"list"
},
item.children.map(function (child) {
console.log(child)
return h('Option', {
props: {
value: child.value,
key: child.value
}
}, child.label)
})
)
])
}
})
)]);
}
},
{
title: '橘子',
key: 'orange'
},
{
title: '西瓜',
key: 'watermelon'
},
{
title: '牛奶',
key: 'milk'
},
{
title: '面包',
key: 'Bread'
},
{
title: '盐',
key: 'salt'
},
{
title: '小麦',
key: 'wheat'
},
{
title: '大米',
key: 'rice'
},
{
title: '酱油',
key: 'soy'
},
{
title: '其他',
key: 'else'
}
],
data1: [
{
apple: 'John Brown',
banana: '18',
orange: 18,
watermelon: 'New York No. 1 Lake Park',
milk: '2016-10-03',
Bread: 'New York No. 1 Lake Park',
salt: '2016-10-03',
wheat: 'New York No. 1 Lake Park',
rice: '2016-10-03',
soy: 'New York No. 1 Lake Park',
else: '2016-10-03'
},{
apple: 'John Brown',
banana: '18',
orange: 18,
watermelon: 'New York No. 1 Lake Park',
milk: '2016-10-03',
Bread: 'New York No. 1 Lake Park',
salt: '2016-10-03',
wheat: 'New York No. 1 Lake Park',
rice: '2016-10-03',
soy: 'New York No. 1 Lake Park',
else: '2016-10-03'
},{
apple: 'John Brown',
banana: '18',
orange: 18,
watermelon: 'New York No. 1 Lake Park',
milk: '2016-10-03',
Bread: 'New York No. 1 Lake Park',
salt: '2016-10-03',
wheat: 'New York No. 1 Lake Park',
rice: '2016-10-03',
soy: 'New York No. 1 Lake Park',
else: '2016-10-03'
},{
apple: 'John Brown',
banana: '18',
orange: 18,
watermelon: 'New York No. 1 Lake Park',
milk: '2016-10-03',
Bread: 'New York No. 1 Lake Park',
salt: '2016-10-03',
wheat: 'New York No. 1 Lake Park',
rice: '2016-10-03',
soy: 'New York No. 1 Lake Park',
else: '2016-10-03',
_checked: true
},{
apple: 'John Brown',
banana: '18',
orange: 18,
watermelon: 'New York No. 1 Lake Park',
milk: '2016-10-03',
Bread: 'New York No. 1 Lake Park',
salt: '2016-10-03',
wheat: 'New York No. 1 Lake Park',
rice: '2016-10-03',
soy: 'New York No. 1 Lake Park',
else: '2016-10-03'
},{
apple: 'John Brown',
banana: '18',
orange: 18,
watermelon: 'New York No. 1 Lake Park',
milk: '2016-10-03',
Bread: 'New York No. 1 Lake Park',
salt: '2016-10-03',
wheat: 'New York No. 1 Lake Park',
rice: '2016-10-03',
soy: 'New York No. 1 Lake Park',
else: '2016-10-03'
},{
apple: 'John Brown',
banana: '18',
orange: 18,
watermelon: 'New York No. 1 Lake Park',
milk: '2016-10-03',
Bread: 'New York No. 1 Lake Park',
salt: '2016-10-03',
wheat: 'New York No. 1 Lake Park',
rice: '2016-10-03',
soy: 'New York No. 1 Lake Park',
else: '2016-10-03'
}
],
data3: [
{
value: "one",
label: "一斤",
children: []
},
{
value: "three",
label: "三斤",
children: [
{
value: "divideOne",
label: "一份3斤"
},
{
value: "divideTwo",
label: "两份各1.5斤"
}
]
},
{
value: "five",
label: "五斤"
}
]
}
},
methods: {
handleSelectAll (status) {
// this.$refs.selection.selectAll(status);
// console.log(this.$refs.selection.$children)
this.$refs.selection.selectAll(status);
console.log(this.selection)
},
rowClassName :function (row, index) {
if(index%2==0){
return 'ivu-table-stripe-even';
}
else return 'ivu-table-stripe-odd';
},
onSelect(selection,index){
// console.log(this.$refs.selection.data)
this.selecteds = selection;
console.log(this.selecteds)
}
/*,
onDoubleClick(row,index){
console.log(row)
//改变为勾选样式
//将当前行加入到selection
this.$refs.selection.data[index]._checked=!this.$refs.selection.data[index]._checked
}*/
}
}
</script>
