梁灏
parent
c211f71778
commit
2810d8c78d
3 changed files with 137 additions and 111 deletions
|
|
@ -87,7 +87,8 @@
|
|||
prefixCls: prefixCls,
|
||||
visible: false,
|
||||
selected: [],
|
||||
tmpSelected: []
|
||||
tmpSelected: [],
|
||||
updatingValue: false // to fix set value in changeOnSelect type
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -162,6 +163,7 @@
|
|||
});
|
||||
|
||||
if (!fromInit) {
|
||||
this.updatingValue = true;
|
||||
this.value = newVal;
|
||||
this.emitValue(this.value, oldVal);
|
||||
}
|
||||
|
|
@ -186,7 +188,11 @@
|
|||
}
|
||||
},
|
||||
value () {
|
||||
this.updateSelected();
|
||||
if (this.updatingValue) {
|
||||
this.updatingValue = false;
|
||||
return;
|
||||
}
|
||||
this.updateSelected(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,80 +1,72 @@
|
|||
<template>
|
||||
<div v-for="item in list">
|
||||
<Cascader :data="data" change-on-select :render-format="format"></Cascader>
|
||||
</div>
|
||||
<i-button @click="add">add</i-button>
|
||||
<i-button @click="remove">remove</i-button>
|
||||
<Cascader :data="data" :value.sync="value" change-on-select></Cascader>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
a: 1
|
||||
}
|
||||
],
|
||||
data: [{
|
||||
value: 'beijing',
|
||||
label: '北京',
|
||||
children: [
|
||||
{
|
||||
value: 'gugong',
|
||||
label: '故宫'
|
||||
},
|
||||
{
|
||||
value: 'tiantan',
|
||||
label: '天坛'
|
||||
},
|
||||
{
|
||||
value: 'wangfujing',
|
||||
label: '王府井'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: '江苏',
|
||||
children: [
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京',
|
||||
children: [
|
||||
{
|
||||
value: 'fuzimiao',
|
||||
label: '夫子庙'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'suzhou',
|
||||
label: '苏州',
|
||||
children: [
|
||||
{
|
||||
value: 'zhuozhengyuan',
|
||||
label: '拙政园'
|
||||
},
|
||||
{
|
||||
value: 'shizilin',
|
||||
label: '狮子林'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}]
|
||||
value: [],
|
||||
data: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.list.push({
|
||||
a: 2
|
||||
})
|
||||
},
|
||||
remove () {
|
||||
this.list.splice(0, 1);
|
||||
},
|
||||
format (labels) {
|
||||
return labels.join(' - ');
|
||||
updateData () {
|
||||
setTimeout(() => {
|
||||
this.data = [{
|
||||
value: 'beijing',
|
||||
label: '北京',
|
||||
children: [
|
||||
{
|
||||
value: 'gugong',
|
||||
label: '故宫'
|
||||
},
|
||||
{
|
||||
value: 'tiantan',
|
||||
label: '天坛'
|
||||
},
|
||||
{
|
||||
value: 'wangfujing',
|
||||
label: '王府井'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: '江苏',
|
||||
children: [
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京',
|
||||
children: [
|
||||
{
|
||||
value: 'fuzimiao',
|
||||
label: '夫子庙'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'suzhou',
|
||||
label: '苏州',
|
||||
children: [
|
||||
{
|
||||
value: 'zhuozhengyuan',
|
||||
label: '拙政园'
|
||||
},
|
||||
{
|
||||
value: 'shizilin',
|
||||
label: '狮子林'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}];
|
||||
setTimeout(() => {
|
||||
this.value = ['beijing', 'tiantan'];
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.updateData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,37 @@
|
|||
<style>
|
||||
/*.ivu-table .demo-table-info-row td{*/
|
||||
/*background-color: #2db7f5;*/
|
||||
/*color: #fff;*/
|
||||
/*}*/
|
||||
/*.ivu-table .demo-table-error-row td{*/
|
||||
/*background-color: #ff6600;*/
|
||||
/*color: #fff;*/
|
||||
/*}*/
|
||||
.ivu-table .table-age-col{
|
||||
background: #ff6600;
|
||||
}
|
||||
.ivu-table .table-name-col{
|
||||
background: #2db7f5;
|
||||
}
|
||||
.ivu-table .table-address-col{
|
||||
background: #187;
|
||||
}
|
||||
.ivu-table .class-cell-age{
|
||||
background: #187;
|
||||
.ivu-table .demo-table-info-row td{
|
||||
background-color: #2db7f5;
|
||||
color: #fff;
|
||||
}
|
||||
.ivu-table .class-cell-address{
|
||||
background: #f60;
|
||||
.ivu-table .demo-table-error-row td{
|
||||
background-color: #ff6600;
|
||||
color: #fff;
|
||||
}
|
||||
.ivu-table .class-cell-name{
|
||||
background: #2db7f5;
|
||||
.ivu-table .demo-table-info-column{
|
||||
background-color: #2db7f5;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #2db7f5;
|
||||
}
|
||||
.ivu-table .demo-table-info-cell-name {
|
||||
background-color: #2db7f5;
|
||||
color: #fff;
|
||||
}
|
||||
.ivu-table .demo-table-info-cell-age {
|
||||
background-color: #ff6600;
|
||||
color: #fff;
|
||||
}
|
||||
.ivu-table .demo-table-info-cell-address {
|
||||
background-color: #187;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<p>自定义行样式：</p>
|
||||
<i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table>
|
||||
<p>自定义列样式：</p>
|
||||
<i-table :columns="columns9" :data="data1"></i-table>
|
||||
<p>自定义任意单元格样式：</p>
|
||||
<i-table :columns="columns1" :data="data8"></i-table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -38,37 +39,38 @@
|
|||
return {
|
||||
columns1: [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 60,
|
||||
align: 'center'
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
columns9: [
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
// fixed: 'right',
|
||||
// className: 'table-name-col'
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age',
|
||||
// fixed: 'right',
|
||||
// className: 'table-age-col'
|
||||
className: 'demo-table-info-column'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
// className: 'table-address-col'
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data1: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居',
|
||||
cellClassName: {
|
||||
age: 'class-cell-age',
|
||||
address: 'class-cell-address'
|
||||
}
|
||||
address: '北京市朝阳区芍药居'
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
|
|
@ -78,16 +80,42 @@
|
|||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道',
|
||||
cellClassName: {
|
||||
name: 'class-cell-name'
|
||||
}
|
||||
address: '上海市浦东新区世纪大道'
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
age: 26,
|
||||
address: '深圳市南山区深南大道'
|
||||
}
|
||||
],
|
||||
data8: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居'
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗',
|
||||
cellClassName: {
|
||||
age: 'demo-table-info-cell-age',
|
||||
address: 'demo-table-info-cell-address'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道'
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
age: 26,
|
||||
address: '深圳市南山区深南大道',
|
||||
cellClassName: {
|
||||
name: 'demo-table-info-cell-name'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue