Table columns add className
Table columns add className
This commit is contained in:
梁灏
parent
1b7aefeab2
commit
f9f1865ca5
6 changed files with 72 additions and 393 deletions
|
|
@ -1,204 +1,46 @@
|
|||
<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;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<i-table border :columns="columns1" :data="data1"></i-table>
|
||||
<!--<i-table border height="200" :columns="columns1" :data="data2"></i-table>-->
|
||||
<!--<i-table width="550" height="200" border :columns="columns2" :data="data4"></i-table>-->
|
||||
<!--<i-button @click="changeFilter">改变filter</i-button>-->
|
||||
<!--<span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>-->
|
||||
<!--<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis-->
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns6"-->
|
||||
<!--width="500"-->
|
||||
<!--:data="[]"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<!--<br/>-->
|
||||
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns7"-->
|
||||
<!--:data="[]"-->
|
||||
<!--no-data-text="No Data"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<!--<br/>-->
|
||||
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns7"-->
|
||||
<!--:data="[]"-->
|
||||
<!--size="small"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<!--<br/>-->
|
||||
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns7"-->
|
||||
<!--:data="[]"-->
|
||||
<!--size="large"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<!--<br/>-->
|
||||
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns7"-->
|
||||
<!--:data="data5"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<!--<br/>-->
|
||||
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns6"-->
|
||||
<!--width="500"-->
|
||||
<!--:data="data5"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
<i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns2: [
|
||||
columns1: [
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: 100,
|
||||
fixed: 'left'
|
||||
fixed: 'right',
|
||||
className: 'table-name-col'
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '省份',
|
||||
key: 'province',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '市区',
|
||||
key: 'city',
|
||||
width: 100
|
||||
fixed: 'right',
|
||||
className: 'table-age-col'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
fixed: 'right',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: '邮编',
|
||||
key: 'zip',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
// fixed: 'right',
|
||||
width: 120,
|
||||
render () {
|
||||
return `<i-button type="text" size="small">查看</i-button><i-button type="text" size="small">编辑</i-button>`;
|
||||
}
|
||||
}
|
||||
],
|
||||
data4: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居',
|
||||
province: '北京市',
|
||||
city: '朝阳区',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗',
|
||||
province: '北京市',
|
||||
city: '海淀区',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道',
|
||||
province: '上海市',
|
||||
city: '浦东新区',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
age: 26,
|
||||
address: '深圳市南山区深南大道',
|
||||
province: '广东',
|
||||
city: '南山区',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居',
|
||||
province: '北京市',
|
||||
city: '朝阳区',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗',
|
||||
province: '北京市',
|
||||
city: '海淀区',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道',
|
||||
province: '上海市',
|
||||
city: '浦东新区',
|
||||
zip: 100000
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
age: 26,
|
||||
address: '深圳市南山区深南大道',
|
||||
province: '广东',
|
||||
city: '南山区',
|
||||
zip: 100000
|
||||
}
|
||||
],
|
||||
columns1: [
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
className: 'table-address-col'
|
||||
}
|
||||
],
|
||||
data1: [
|
||||
|
|
@ -222,206 +64,17 @@
|
|||
age: 26,
|
||||
address: '深圳市南山区深南大道'
|
||||
}
|
||||
],
|
||||
data2: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居'
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗'
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道'
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
age: 26,
|
||||
address: '深圳市南山区深南大道'
|
||||
},
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居'
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗'
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道'
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
age: 26,
|
||||
address: '深圳市南山区深南大道'
|
||||
}
|
||||
],
|
||||
columns6: [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 60,
|
||||
align: 'center',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
fixed: 'left',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age',
|
||||
width: 100,
|
||||
filters: [
|
||||
{
|
||||
label: '大于25岁',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '小于25岁',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
filterMultiple: false,
|
||||
filterMethod (value, row) {
|
||||
if (value === 1) {
|
||||
return row.age > 25;
|
||||
} else if (value === 2) {
|
||||
return row.age < 25;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
width: 100,
|
||||
filters: [
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海'
|
||||
},
|
||||
{
|
||||
label: '深圳',
|
||||
value: '深圳'
|
||||
}
|
||||
],
|
||||
filterMethod (value, row) {
|
||||
return row.address.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '长文本',
|
||||
key: 'longText',
|
||||
width: 100,
|
||||
ellipsis: false
|
||||
}
|
||||
],
|
||||
columns7: [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 60,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address',
|
||||
filters: [
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海'
|
||||
},
|
||||
{
|
||||
label: '深圳',
|
||||
value: '深圳'
|
||||
}
|
||||
],
|
||||
filterMethod (value, row) {
|
||||
return row.address.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '长文本',
|
||||
key: 'longText',
|
||||
ellipsis: false
|
||||
}
|
||||
],
|
||||
data5: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居',
|
||||
date: '2016-10-03',
|
||||
longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗',
|
||||
date: '2016-10-01',
|
||||
longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道',
|
||||
date: '2016-10-02',
|
||||
longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
|
||||
}
|
||||
],
|
||||
currentRow: null
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeFilter () {
|
||||
this.columns6[2].filters = [
|
||||
{
|
||||
label: '小于25岁',
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
switchCellEllipsis (status) {
|
||||
this.columns6[5].ellipsis = status
|
||||
},
|
||||
onClick (data) {
|
||||
window.alert('Click ' + data.name)
|
||||
},
|
||||
onCurrentChange (data) {
|
||||
this.currentRow = data
|
||||
},
|
||||
onDblclick (data) {
|
||||
window.alert('Double Click ' + data.name)
|
||||
rowClassName (row, index) {
|
||||
if (index === 1) {
|
||||
return 'demo-table-info-row';
|
||||
} else if (index === 3) {
|
||||
return 'demo-table-error-row';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue