iview table表格中添加select選擇器以及dropdown下拉菜單
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了
- 內嵌的css規定了它的寬度，我發現修改這個值是起做用的
- 不要去改變select框的寬度，而是去改變select的下拉框的寬度，不然會出現一些東西被覆蓋的狀況
/*調節選擇框的下拉框的寬度*/
.ivu-select-dropdown{
min-width: 182px!important;
}
- 效果圖
- 反顯的話須要在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>
相關文章
- 1. iview table表格中添加select選擇器以及dropdown下拉菜單
- 2. dropdown 下拉菜單
- 3. 在iview的Table中添加Select（render）
- 4. iView-admin2.0使用中在table表格中使用下拉菜單的方法
- 5. bootstrap之dropdown下拉菜單
- 6. iview中Select 選擇器多選校驗
- 7. iview Table表格單選框互斥
- 8. Excel表格添加下拉多選
- 9. layui select下拉菜單 自動選擇問題(回選)
- 10. iview中在table組件中添加select（以及不成功的問題處理）
- 更多相關文章...
- • jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
- • ionic 上拉菜單(ActionSheet) - ionic 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Flink 數據傳輸及反壓詳解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章