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,8 +1,9 @@
|
||||||
export default {
|
export default {
|
||||||
methods: {
|
methods: {
|
||||||
alignCls (column) {
|
alignCls (column, type) {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
|
[`${column.className}`]: column.className && type === 'body',
|
||||||
[`${this.prefixCls}-column-${column.align}`]: column.align,
|
[`${this.prefixCls}-column-${column.align}`]: column.align,
|
||||||
[`${this.prefixCls}-hidden`]: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'))
|
[`${this.prefixCls}-hidden`]: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'))
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
@mouseleave.stop="handleMouseOut(row._index)"
|
@mouseleave.stop="handleMouseOut(row._index)"
|
||||||
@click.stop="clickCurrentRow(row._index)"
|
@click.stop="clickCurrentRow(row._index)"
|
||||||
@dblclick.stop="dblclickCurrentRow(row._index)">
|
@dblclick.stop="dblclickCurrentRow(row._index)">
|
||||||
<td v-for="column in columns" :class="alignCls(column)">
|
<td v-for="column in columns" :class="alignCls(column, 'body')">
|
||||||
<Cell
|
<Cell
|
||||||
:fixed="fixed"
|
:fixed="fixed"
|
||||||
:prefix-cls="prefixCls"
|
:prefix-cls="prefixCls"
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
</colgroup>
|
</colgroup>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th v-for="(index, column) in columns" :class="alignCls(column)">
|
<th v-for="(index, column) in columns" :class="alignCls(column, 'head')">
|
||||||
<div :class="cellClasses(column)">
|
<div :class="cellClasses(column)">
|
||||||
<template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
|
<template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<Cascader :data="data" change-on-select></Cascader>
|
<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>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
a: 1
|
||||||
|
}
|
||||||
|
],
|
||||||
data: [{
|
data: [{
|
||||||
value: 'beijing',
|
value: 'beijing',
|
||||||
label: '北京',
|
label: '北京',
|
||||||
|
|
@ -32,7 +41,7 @@
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
value: 'fuzimiao',
|
value: 'fuzimiao',
|
||||||
label: '夫子庙',
|
label: '夫子庙'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
@ -42,17 +51,30 @@
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
value: 'zhuozhengyuan',
|
value: 'zhuozhengyuan',
|
||||||
label: '拙政园',
|
label: '拙政园'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: 'shizilin',
|
value: 'shizilin',
|
||||||
label: '狮子林',
|
label: '狮子林'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
add () {
|
||||||
|
this.list.push({
|
||||||
|
a: 2
|
||||||
|
})
|
||||||
|
},
|
||||||
|
remove () {
|
||||||
|
this.list.splice(0, 1);
|
||||||
|
},
|
||||||
|
format (labels) {
|
||||||
|
return labels.join(' - ');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,13 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<row>
|
<Tabs active-key="key1">
|
||||||
<i-col span="0">123</i-col>
|
<Tab-pane label="标签一" key="key1">
|
||||||
<i-col span="24">24</i-col>
|
<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
|
||||||
</row>
|
</Tab-pane>
|
||||||
|
<Tab-pane label="标签二" key="key2">标签二的内容</Tab-pane>
|
||||||
|
<Tab-pane label="标签三" key="key3">标签三的内容</Tab-pane>
|
||||||
|
</Tabs>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
<template>
|
||||||
<i-table border :columns="columns1" :data="data1"></i-table>
|
<i-table :row-class-name="rowClassName" :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>-->
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
columns2: [
|
columns1: [
|
||||||
{
|
{
|
||||||
title: '姓名',
|
title: '姓名',
|
||||||
key: 'name',
|
key: 'name',
|
||||||
width: 100,
|
fixed: 'right',
|
||||||
fixed: 'left'
|
className: 'table-name-col'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '年龄',
|
title: '年龄',
|
||||||
key: 'age',
|
key: 'age',
|
||||||
width: 100
|
fixed: 'right',
|
||||||
},
|
className: 'table-age-col'
|
||||||
{
|
|
||||||
title: '省份',
|
|
||||||
key: 'province',
|
|
||||||
width: 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '市区',
|
|
||||||
key: 'city',
|
|
||||||
width: 100
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '地址',
|
title: '地址',
|
||||||
key: 'address',
|
key: 'address',
|
||||||
fixed: 'right',
|
className: 'table-address-col'
|
||||||
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'
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
data1: [
|
data1: [
|
||||||
|
|
@ -222,206 +64,17 @@
|
||||||
age: 26,
|
age: 26,
|
||||||
address: '深圳市南山区深南大道'
|
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: {
|
methods: {
|
||||||
changeFilter () {
|
rowClassName (row, index) {
|
||||||
this.columns6[2].filters = [
|
if (index === 1) {
|
||||||
{
|
return 'demo-table-info-row';
|
||||||
label: '小于25岁',
|
} else if (index === 3) {
|
||||||
value: 2
|
return 'demo-table-error-row';
|
||||||
}
|
}
|
||||||
]
|
return '';
|
||||||
},
|
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue