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 {
|
||||
methods: {
|
||||
alignCls (column) {
|
||||
alignCls (column, type) {
|
||||
return [
|
||||
{
|
||||
[`${column.className}`]: column.className && type === 'body',
|
||||
[`${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'))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
@mouseleave.stop="handleMouseOut(row._index)"
|
||||
@click.stop="clickCurrentRow(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
|
||||
:fixed="fixed"
|
||||
:prefix-cls="prefixCls"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
</colgroup>
|
||||
<thead>
|
||||
<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)">
|
||||
<template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
|
||||
<template v-else>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,19 @@
|
|||
<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>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
a: 1
|
||||
}
|
||||
],
|
||||
data: [{
|
||||
value: 'beijing',
|
||||
label: '北京',
|
||||
|
|
@ -32,7 +41,7 @@
|
|||
children: [
|
||||
{
|
||||
value: 'fuzimiao',
|
||||
label: '夫子庙',
|
||||
label: '夫子庙'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -42,17 +51,30 @@
|
|||
children: [
|
||||
{
|
||||
value: 'zhuozhengyuan',
|
||||
label: '拙政园',
|
||||
label: '拙政园'
|
||||
},
|
||||
{
|
||||
value: 'shizilin',
|
||||
label: '狮子林',
|
||||
label: '狮子林'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
]
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.list.push({
|
||||
a: 2
|
||||
})
|
||||
},
|
||||
remove () {
|
||||
this.list.splice(0, 1);
|
||||
},
|
||||
format (labels) {
|
||||
return labels.join(' - ');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,13 @@
|
|||
}
|
||||
</style>
|
||||
<template>
|
||||
<row>
|
||||
<i-col span="0">123</i-col>
|
||||
<i-col span="24">24</i-col>
|
||||
</row>
|
||||
<Tabs active-key="key1">
|
||||
<Tab-pane label="标签一" key="key1">
|
||||
<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
|
||||
</Tab-pane>
|
||||
<Tab-pane label="标签二" key="key2">标签二的内容</Tab-pane>
|
||||
<Tab-pane label="标签三" key="key3">标签三的内容</Tab-pane>
|
||||
</Tabs>
|
||||
</template>
|
||||
<script>
|
||||
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>
|
||||
<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
Reference in a new issue