Table support tree data
This commit is contained in:
梁灏
parent
1e41ced797
commit
c591ddc9b7
5 changed files with 372 additions and 612 deletions
|
|
@ -1,57 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="margin: 200px">
|
<div style="margin: 100px;">
|
||||||
<Divider>合计</Divider>
|
<Table border ref="selection" :columns="columns4" :data="data1" row-key></Table>
|
||||||
<Table size="small" border :columns="columns4" :data="data11" show-summary :height="200"></Table>
|
<Button @click="handleSelectAll(true)">Set all selected</Button>
|
||||||
<br>
|
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
|
||||||
<Table border :columns="columns4" :data="data11" show-summary :height="200"></Table>
|
|
||||||
<br>
|
|
||||||
<Table size="large" border :columns="columns4" :data="data11" show-summary :height="200"></Table>
|
|
||||||
<br>
|
|
||||||
<Table border :columns="columns4" :data="data11" show-summary></Table>
|
|
||||||
<br>
|
|
||||||
<Table border :columns="columns5" :data="data11" show-summary></Table>
|
|
||||||
<br>
|
|
||||||
<Table border :columns="columns8" :data="data11" show-summary></Table>
|
|
||||||
<br>
|
|
||||||
<Table border :columns="columns5" :data="data11" show-summary :height="200"></Table>
|
|
||||||
<Divider>合并单元格</Divider>
|
|
||||||
<Table border :columns="columns1" :data="data1" :span-method="handleSpan"></Table>
|
|
||||||
<br>
|
|
||||||
<Table border :columns="columns1" :data="data1" :span-method="handleSpan2"></Table>
|
|
||||||
<Divider>拖拽调整列宽</Divider>
|
|
||||||
<Table border :columns="columns1" :data="data1"></Table>
|
|
||||||
<Divider>排序筛选</Divider>
|
|
||||||
<div style="margin: 0 0px;">
|
|
||||||
<Table @on-column-width-resize="handleResize" border :columns="columns6" :data="data5"></Table>
|
|
||||||
</div>
|
|
||||||
<Divider>普通表格</Divider>
|
|
||||||
<Table size="small" :columns="columns1" :data="data1"></Table>
|
|
||||||
<br>
|
|
||||||
<Table :columns="columns1" :data="data1"></Table>
|
|
||||||
<br>
|
|
||||||
<Table size="large" :columns="columns1" :data="data1"></Table>
|
|
||||||
<Divider>斑马纹</Divider>
|
|
||||||
<Table stripe :columns="columns1" :data="data1"></Table>
|
|
||||||
<Divider>带边框</Divider>
|
|
||||||
<Table border :columns="columns1" :data="data1"></Table>
|
|
||||||
<Divider>头固定（普通）</Divider>
|
|
||||||
<Table height="200" :columns="columns1" :data="data2"></Table>
|
|
||||||
<Divider>头固定（边框）</Divider>
|
|
||||||
<Table height="200" border :columns="columns1" :data="data2"></Table>
|
|
||||||
<Divider>列固定（普通）</Divider>
|
|
||||||
<Table width="550" :columns="columns2" :data="data3"></Table>
|
|
||||||
<Divider>列固定（边框）</Divider>
|
|
||||||
<Table width="550" border :columns="columns2" :data="data3"></Table>
|
|
||||||
<Divider>都固定（普通）</Divider>
|
|
||||||
<Table width="550" height="200" :columns="columns2" :data="data4"></Table>
|
|
||||||
<Divider>都固定（边框）</Divider>
|
|
||||||
<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>
|
|
||||||
<Divider>表头分组（普通）</Divider>
|
|
||||||
<Table :columns="columns11" :data="data10" height="500"></Table>
|
|
||||||
<Divider>表头分组（边框）</Divider>
|
|
||||||
<Table border :columns="columns11" :data="data10" height="500"></Table>
|
|
||||||
<Divider>筛选</Divider>
|
|
||||||
<Table border :columns="columns6" :data="data5"></Table>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -60,205 +11,14 @@
|
||||||
return {
|
return {
|
||||||
columns4: [
|
columns4: [
|
||||||
{
|
{
|
||||||
title: 'ID',
|
type: 'selection',
|
||||||
key: 'id'
|
width: 60,
|
||||||
},
|
align: 'center'
|
||||||
{
|
|
||||||
title: '姓名',
|
|
||||||
key: 'name'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数值 1',
|
|
||||||
key: 'amount1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数值 2',
|
|
||||||
key: 'amount2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数值 3',
|
|
||||||
key: 'amount3'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
columns5: [
|
|
||||||
{
|
|
||||||
title: 'ID',
|
|
||||||
key: 'id',
|
|
||||||
fixed: 'left',
|
|
||||||
width: 180
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '姓名',
|
|
||||||
key: 'name',
|
|
||||||
width: 250
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数值 1',
|
|
||||||
key: 'amount1',
|
|
||||||
width: 250,
|
|
||||||
fixed: 'right'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数值 2',
|
|
||||||
key: 'amount2',
|
|
||||||
width: 250
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数值 3',
|
|
||||||
key: 'amount3',
|
|
||||||
width: 180
|
|
||||||
}
|
|
||||||
],
|
|
||||||
columns8: [
|
|
||||||
{
|
|
||||||
title: 'ID',
|
|
||||||
key: 'id',
|
|
||||||
fixed: 'left',
|
|
||||||
width: 180
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '姓名',
|
|
||||||
key: 'name',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数值 1',
|
|
||||||
key: 'amount1',
|
|
||||||
width: 250,
|
|
||||||
fixed: 'right'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数值 2',
|
|
||||||
key: 'amount2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数值 3',
|
|
||||||
key: 'amount3',
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data11: [
|
|
||||||
{
|
|
||||||
id: '12987122',
|
|
||||||
name: '王小虎',
|
|
||||||
amount1: '234',
|
|
||||||
amount2: '3.2',
|
|
||||||
amount3: 10
|
|
||||||
}, {
|
|
||||||
id: '12987123',
|
|
||||||
name: '王小虎',
|
|
||||||
amount1: '165',
|
|
||||||
amount2: '4.43',
|
|
||||||
amount3: 12
|
|
||||||
}, {
|
|
||||||
id: '12987124',
|
|
||||||
name: '王小虎',
|
|
||||||
amount1: '324',
|
|
||||||
amount2: '1.9',
|
|
||||||
amount3: 9
|
|
||||||
}, {
|
|
||||||
id: '12987125',
|
|
||||||
name: '王小虎',
|
|
||||||
amount1: '621',
|
|
||||||
amount2: '2.2',
|
|
||||||
amount3: 17
|
|
||||||
}, {
|
|
||||||
id: '12987126',
|
|
||||||
name: '王小虎',
|
|
||||||
amount1: '539',
|
|
||||||
amount2: '4.1',
|
|
||||||
amount3: 15
|
|
||||||
}
|
|
||||||
],
|
|
||||||
columns6: [
|
|
||||||
{
|
|
||||||
title: 'Date',
|
|
||||||
key: 'date',
|
|
||||||
sortable: true,
|
|
||||||
resizable: true,
|
|
||||||
width: 180,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Name',
|
title: 'Name',
|
||||||
key: 'name',
|
key: 'name',
|
||||||
resizable: true,
|
tree: true
|
||||||
width: 180,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Age',
|
|
||||||
key: 'age',
|
|
||||||
sortable: true,
|
|
||||||
resizable: true,
|
|
||||||
width: 180,
|
|
||||||
filters: [
|
|
||||||
{
|
|
||||||
label: 'Greater than 25',
|
|
||||||
value: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Less than 25',
|
|
||||||
value: 2
|
|
||||||
}
|
|
||||||
],
|
|
||||||
filterMultiple: false,
|
|
||||||
filterMethod (value, row) {
|
|
||||||
if (value === 1) {
|
|
||||||
return row.age > 25;
|
|
||||||
} else if (value === 2) {
|
|
||||||
return row.age < 25;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Address',
|
|
||||||
key: 'address',
|
|
||||||
filters: [
|
|
||||||
{
|
|
||||||
label: 'New York',
|
|
||||||
value: 'New York'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'London',
|
|
||||||
value: 'London'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Sydney',
|
|
||||||
value: 'Sydney'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
filterMethod (value, row) {
|
|
||||||
return row.address.indexOf(value) > -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data5: [
|
|
||||||
{
|
|
||||||
name: 'John Brown',
|
|
||||||
age: 18,
|
|
||||||
address: 'New York No. 1 Lake Park',
|
|
||||||
date: '2016-10-03'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jim Green',
|
|
||||||
age: 24,
|
|
||||||
address: 'London No. 1 Lake Park',
|
|
||||||
date: '2016-10-01'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 30,
|
|
||||||
address: 'Sydney No. 1 Lake Park',
|
|
||||||
date: '2016-10-02'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park',
|
|
||||||
date: '2016-10-04'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
columns1: [
|
|
||||||
{
|
|
||||||
title: 'Name',
|
|
||||||
key: 'name'
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Age',
|
title: 'Age',
|
||||||
|
|
@ -280,370 +40,74 @@
|
||||||
name: 'Jim Green',
|
name: 'Jim Green',
|
||||||
age: 24,
|
age: 24,
|
||||||
address: 'London No. 1 Lake Park',
|
address: 'London No. 1 Lake Park',
|
||||||
date: '2016-10-01'
|
date: '2016-10-01',
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 30,
|
|
||||||
address: 'Sydney No. 1 Lake Park',
|
|
||||||
date: '2016-10-02'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park',
|
|
||||||
date: '2016-10-04'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow2',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park',
|
|
||||||
date: '2016-10-04'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow3',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park',
|
|
||||||
date: '2016-10-04'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow4',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park',
|
|
||||||
date: '2016-10-04'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data2: [
|
|
||||||
{
|
|
||||||
name: 'John Brown',
|
|
||||||
age: 18,
|
|
||||||
address: 'New York No. 1 Lake Park',
|
|
||||||
date: '2016-10-03'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jim Green',
|
|
||||||
age: 24,
|
|
||||||
address: 'London No. 1 Lake Park',
|
|
||||||
date: '2016-10-01'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 30,
|
|
||||||
address: 'Sydney No. 1 Lake Park',
|
|
||||||
date: '2016-10-02'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park',
|
|
||||||
date: '2016-10-04'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'John Brown',
|
|
||||||
age: 18,
|
|
||||||
address: 'New York No. 1 Lake Park',
|
|
||||||
date: '2016-10-03'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jim Green',
|
|
||||||
age: 24,
|
|
||||||
address: 'London No. 1 Lake Park',
|
|
||||||
date: '2016-10-01'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 30,
|
|
||||||
address: 'Sydney No. 1 Lake Park',
|
|
||||||
date: '2016-10-02'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park',
|
|
||||||
date: '2016-10-04'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
columns2: [
|
|
||||||
{
|
|
||||||
title: 'Name',
|
|
||||||
key: 'name',
|
|
||||||
width: 100,
|
|
||||||
fixed: 'left'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Age',
|
|
||||||
key: 'age',
|
|
||||||
width: 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Province',
|
|
||||||
key: 'province',
|
|
||||||
width: 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'City',
|
|
||||||
key: 'city',
|
|
||||||
width: 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Address',
|
|
||||||
key: 'address',
|
|
||||||
width: 200
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Postcode',
|
|
||||||
key: 'zip',
|
|
||||||
width: 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Action',
|
|
||||||
key: 'action',
|
|
||||||
fixed: 'right',
|
|
||||||
width: 120,
|
|
||||||
render: (h, params) => {
|
|
||||||
return h('div', [
|
|
||||||
h('Button', {
|
|
||||||
props: {
|
|
||||||
type: 'text',
|
|
||||||
size: 'small'
|
|
||||||
}
|
|
||||||
}, 'View'),
|
|
||||||
h('Button', {
|
|
||||||
props: {
|
|
||||||
type: 'text',
|
|
||||||
size: 'small'
|
|
||||||
}
|
|
||||||
}, 'Edit')
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data4: [
|
|
||||||
{
|
|
||||||
name: 'John Brown',
|
|
||||||
age: 18,
|
|
||||||
address: 'New York No. 1 Lake Park',
|
|
||||||
province: 'America',
|
|
||||||
city: 'New York',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jim Green',
|
|
||||||
age: 24,
|
|
||||||
address: 'Washington, D.C. No. 1 Lake Park',
|
|
||||||
province: 'America',
|
|
||||||
city: 'Washington, D.C.',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 30,
|
|
||||||
address: 'Sydney No. 1 Lake Park',
|
|
||||||
province: 'Australian',
|
|
||||||
city: 'Sydney',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park',
|
|
||||||
province: 'Canada',
|
|
||||||
city: 'Ottawa',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'John Brown',
|
|
||||||
age: 18,
|
|
||||||
address: 'New York No. 1 Lake Park',
|
|
||||||
province: 'America',
|
|
||||||
city: 'New York',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jim Green',
|
|
||||||
age: 24,
|
|
||||||
address: 'Washington, D.C. No. 1 Lake Park',
|
|
||||||
province: 'America',
|
|
||||||
city: 'Washington, D.C.',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 30,
|
|
||||||
address: 'Sydney No. 1 Lake Park',
|
|
||||||
province: 'Australian',
|
|
||||||
city: 'Sydney',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park',
|
|
||||||
province: 'Canada',
|
|
||||||
city: 'Ottawa',
|
|
||||||
zip: 100000
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data3: [
|
|
||||||
{
|
|
||||||
name: 'John Brown',
|
|
||||||
age: 18,
|
|
||||||
address: 'New York No. 1 Lake Park',
|
|
||||||
province: 'America',
|
|
||||||
city: 'New York',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jim Green',
|
|
||||||
age: 24,
|
|
||||||
address: 'Washington, D.C. No. 1 Lake Park',
|
|
||||||
province: 'America',
|
|
||||||
city: 'Washington, D.C.',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Joe Black',
|
|
||||||
age: 30,
|
|
||||||
address: 'Sydney No. 1 Lake Park',
|
|
||||||
province: 'Australian',
|
|
||||||
city: 'Sydney',
|
|
||||||
zip: 100000
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Jon Snow',
|
|
||||||
age: 26,
|
|
||||||
address: 'Ottawa No. 2 Lake Park',
|
|
||||||
province: 'Canada',
|
|
||||||
city: 'Ottawa',
|
|
||||||
zip: 100000
|
|
||||||
}
|
|
||||||
],
|
|
||||||
columns11: [
|
|
||||||
{
|
|
||||||
title: 'Name',
|
|
||||||
key: 'name',
|
|
||||||
align: 'center',
|
|
||||||
width: 200,
|
|
||||||
fixed: 'left',
|
|
||||||
filters: [
|
|
||||||
{
|
|
||||||
label: 'Joe',
|
|
||||||
value: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'John',
|
|
||||||
value: 2
|
|
||||||
}
|
|
||||||
],
|
|
||||||
filterMultiple: false,
|
|
||||||
filterMethod (value, row) {
|
|
||||||
if (value === 1) {
|
|
||||||
return row.name === 'Joe';
|
|
||||||
} else if (value === 2) {
|
|
||||||
return row.name === 'John Brown';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Other',
|
|
||||||
align: 'center',
|
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: 'Age',
|
name: '张三',
|
||||||
key: 'age',
|
age: 18,
|
||||||
align: 'center',
|
address: '发动机莲富大厦放假了开始的',
|
||||||
width: 200,
|
date: '2016-10-01'
|
||||||
sortable: true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Address',
|
name: '李四',
|
||||||
align: 'center',
|
age: 19,
|
||||||
|
address: '风刀霜剑分离的思路开发',
|
||||||
|
date: '2016-10-02'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '王五',
|
||||||
|
age: 20,
|
||||||
|
address: '分离的付款就说个就是范德萨发生',
|
||||||
|
date: '2016-10-03',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: 'Street',
|
name: '赵六',
|
||||||
key: 'street',
|
age: 21,
|
||||||
align: 'center',
|
address: '梵蒂冈人太热疼我',
|
||||||
width: 200
|
date: '2016-10-05'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Block',
|
name: '丁八',
|
||||||
align: 'center',
|
age: 22,
|
||||||
|
address: '法第三方的范德萨范德萨发送到',
|
||||||
|
date: '2016-10-06',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: 'Building',
|
name: '第九',
|
||||||
key: 'building',
|
age: 23,
|
||||||
align: 'center',
|
address: '9梵蒂冈人太热疼我',
|
||||||
width: 200,
|
date: '2016-10-07'
|
||||||
sortable: true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Door No.',
|
name: '第十',
|
||||||
key: 'door',
|
age: 24,
|
||||||
align: 'center',
|
address: '10法第三方的范德萨范德萨发送到',
|
||||||
width: 200
|
date: '2016-10-08'
|
||||||
}
|
},
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Company',
|
name: 'Joe Black',
|
||||||
align: 'center',
|
age: 30,
|
||||||
children: [
|
address: 'Sydney No. 1 Lake Park',
|
||||||
{
|
date: '2016-10-02'
|
||||||
title: 'Company Address',
|
|
||||||
key: 'caddress',
|
|
||||||
align: 'center',
|
|
||||||
width: 200
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Company Name',
|
|
||||||
key: 'cname',
|
|
||||||
align: 'center',
|
|
||||||
width: 200
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Gender',
|
name: 'Jon Snow',
|
||||||
key: 'gender',
|
age: 26,
|
||||||
align: 'center',
|
address: 'Ottawa No. 2 Lake Park',
|
||||||
width: 200,
|
date: '2016-10-04'
|
||||||
fixed: 'right'
|
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
data10: [{"key":0,"name":"John Brown","age":1,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":1,"name":"John Brown","age":2,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":2,"name":"John Brown","age":3,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":3,"name":"John Brown","age":4,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":4,"name":"John Brown","age":5,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":5,"name":"John Brown","age":6,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":6,"name":"John Brown","age":7,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":7,"name":"John Brown","age":8,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":8,"name":"John Brown","age":9,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":9,"name":"John Brown","age":10,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":10,"name":"John Brown","age":11,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":11,"name":"John Brown","age":12,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":12,"name":"John Brown","age":13,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":13,"name":"John Brown","age":14,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":14,"name":"John Brown","age":15,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":15,"name":"John Brown","age":16,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":16,"name":"John Brown","age":17,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":17,"name":"John Brown","age":18,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":18,"name":"John Brown","age":19,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"},{"key":19,"name":"John Brown","age":20,"street":"Lake Park","building":"C","door":2035,"caddress":"Lake Street 42","cname":"SoftLake Co","gender":"M"}]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleResize (width) {
|
handleSelectAll (status) {
|
||||||
console.log(width);
|
this.$refs.selection.selectAll(status);
|
||||||
},
|
|
||||||
handleSpan ({ row, column, rowIndex, columnIndex }) {
|
|
||||||
if (rowIndex % 2 === 0) {
|
|
||||||
if (columnIndex === 0) {
|
|
||||||
return [1, 2];
|
|
||||||
} else if (columnIndex === 1) {
|
|
||||||
return [0, 0];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleSpan2 ({ row, column, rowIndex, columnIndex }) {
|
|
||||||
if (columnIndex === 0) {
|
|
||||||
if (rowIndex % 2 === 0) {
|
|
||||||
return {
|
|
||||||
rowspan: 2,
|
|
||||||
colspan: 1
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
return {
|
|
||||||
rowspan: 0,
|
|
||||||
colspan: 0
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,12 @@
|
||||||
<template v-if="renderType === 'selection'">
|
<template v-if="renderType === 'selection'">
|
||||||
<Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
|
<Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
|
||||||
</template>
|
</template>
|
||||||
|
<div class="ivu-table-cell-tree-level" v-if="showLevel" :style="treeLevelStyle"></div>
|
||||||
|
<div class="ivu-table-cell-tree" v-if="showChildren">
|
||||||
|
<Icon type="ios-add" v-if="!row._isShowChildren" @click="handleOpenTree" />
|
||||||
|
<Icon type="ios-remove" v-else @click="handleCloseTree" />
|
||||||
|
</div>
|
||||||
|
<div class="ivu-table-cell-tree ivu-table-cell-tree-empty" v-else-if="showTreeNode"></div>
|
||||||
<template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
|
<template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
|
||||||
<template v-if="renderType === 'normal'">
|
<template v-if="renderType === 'normal'">
|
||||||
<template v-if="column.tooltip">
|
<template v-if="column.tooltip">
|
||||||
|
|
@ -54,6 +60,12 @@
|
||||||
fixed: {
|
fixed: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
// 是否为 tree 子节点
|
||||||
|
treeNode: Boolean,
|
||||||
|
treeLevel: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
|
|
@ -84,6 +96,35 @@
|
||||||
[`${this.prefixCls}-cell-expand-expanded`]: this.expanded
|
[`${this.prefixCls}-cell-expand-expanded`]: this.expanded
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
},
|
||||||
|
showChildren () {
|
||||||
|
let status = false;
|
||||||
|
if (this.renderType === 'html' || this.renderType === 'normal' || this.renderType === 'render' || this.renderType === 'slot') {
|
||||||
|
const data = this.row;
|
||||||
|
if ((data.children && data.children.length) || ('_loading' in data && data._loading)) {
|
||||||
|
if (this.column.tree) status = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return status;
|
||||||
|
},
|
||||||
|
showTreeNode () {
|
||||||
|
let status = false;
|
||||||
|
if (this.renderType === 'html' || this.renderType === 'normal' || this.renderType === 'render' || this.renderType === 'slot') {
|
||||||
|
if (this.column.tree && this.treeNode) status = true;
|
||||||
|
}
|
||||||
|
return status;
|
||||||
|
},
|
||||||
|
showLevel () {
|
||||||
|
let status = false;
|
||||||
|
if (this.renderType === 'html' || this.renderType === 'normal' || this.renderType === 'render' || this.renderType === 'slot') {
|
||||||
|
if (this.column.tree && this.treeNode) status = true;
|
||||||
|
}
|
||||||
|
return status;
|
||||||
|
},
|
||||||
|
treeLevelStyle () {
|
||||||
|
return {
|
||||||
|
'padding-left': this.treeLevel * this.tableRoot.indentSize + 'px'
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -108,6 +149,12 @@
|
||||||
},
|
},
|
||||||
handleTooltipHide () {
|
handleTooltipHide () {
|
||||||
this.tooltipShow = false;
|
this.tooltipShow = false;
|
||||||
|
},
|
||||||
|
handleOpenTree () {
|
||||||
|
|
||||||
|
},
|
||||||
|
handleCloseTree () {
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
<!--
|
||||||
<template>
|
<template>
|
||||||
<table cellspacing="0" cellpadding="0" border="0" :style="styleObject">
|
<table cellspacing="0" cellpadding="0" border="0" :style="styleObject">
|
||||||
<colgroup>
|
<colgroup>
|
||||||
|
|
@ -38,6 +39,7 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</template>
|
</template>
|
||||||
|
-->
|
||||||
<script>
|
<script>
|
||||||
// todo :key="row"
|
// todo :key="row"
|
||||||
import TableTr from './table-tr.vue';
|
import TableTr from './table-tr.vue';
|
||||||
|
|
@ -93,16 +95,19 @@
|
||||||
rowExpanded(_index){
|
rowExpanded(_index){
|
||||||
return this.objData[_index] && this.objData[_index]._isExpanded;
|
return this.objData[_index] && this.objData[_index]._isExpanded;
|
||||||
},
|
},
|
||||||
handleMouseIn (_index) {
|
handleMouseIn (_index, event) {
|
||||||
|
event.stopPropagation();
|
||||||
this.$parent.handleMouseIn(_index);
|
this.$parent.handleMouseIn(_index);
|
||||||
},
|
},
|
||||||
handleMouseOut (_index) {
|
handleMouseOut (_index, event) {
|
||||||
|
event.stopPropagation();
|
||||||
this.$parent.handleMouseOut(_index);
|
this.$parent.handleMouseOut(_index);
|
||||||
},
|
},
|
||||||
clickCurrentRow (_index) {
|
clickCurrentRow (_index) {
|
||||||
this.$parent.clickCurrentRow(_index);
|
this.$parent.clickCurrentRow(_index);
|
||||||
},
|
},
|
||||||
dblclickCurrentRow (_index) {
|
dblclickCurrentRow (_index, event) {
|
||||||
|
event.stopPropagation();
|
||||||
this.$parent.dblclickCurrentRow(_index);
|
this.$parent.dblclickCurrentRow(_index);
|
||||||
},
|
},
|
||||||
getSpan (row, column, rowIndex, columnIndex) {
|
getSpan (row, column, rowIndex, columnIndex) {
|
||||||
|
|
@ -134,7 +139,169 @@
|
||||||
showWithSpan (row, column, rowIndex, columnIndex) {
|
showWithSpan (row, column, rowIndex, columnIndex) {
|
||||||
const result = this.getSpan(row, column, rowIndex, columnIndex);
|
const result = this.getSpan(row, column, rowIndex, columnIndex);
|
||||||
return !(('rowspan' in result && result.rowspan === 0) || ('colspan' in result && result.colspan === 0));
|
return !(('rowspan' in result && result.rowspan === 0) || ('colspan' in result && result.colspan === 0));
|
||||||
|
},
|
||||||
|
getChildNode (h, data, nodes, level = 1) {
|
||||||
|
if (data.children && data.children.length) {
|
||||||
|
data.children.forEach((row, index) => {
|
||||||
|
let $tds = [];
|
||||||
|
|
||||||
|
this.columns.forEach((column, colIndex) => {
|
||||||
|
if (this.showWithSpan(row, column, index, colIndex)) {
|
||||||
|
const $tableCell = h(TableCell, {
|
||||||
|
props: {
|
||||||
|
fixed: this.fixed,
|
||||||
|
'prefix-cls': this.prefixCls,
|
||||||
|
row: row,
|
||||||
|
column: column,
|
||||||
|
'natural-index': index,
|
||||||
|
index: row._index,
|
||||||
|
checked: this.rowChecked(row._index),
|
||||||
|
disabled: this.rowDisabled(row._index),
|
||||||
|
expanded: this.rowExpanded(row._index),
|
||||||
|
treeNode: true,
|
||||||
|
treeLevel: level
|
||||||
|
},
|
||||||
|
key: column._columnKey,
|
||||||
|
});
|
||||||
|
|
||||||
|
const $td = h('td', {
|
||||||
|
class: this.alignCls(column, row),
|
||||||
|
attrs: this.getSpan(row, column, index, colIndex)
|
||||||
|
}, [$tableCell]);
|
||||||
|
$tds.push($td);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const $tableTr = h(TableTr, {
|
||||||
|
props: {
|
||||||
|
draggable: false,
|
||||||
|
row: row,
|
||||||
|
'prefix-cls': this.prefixCls
|
||||||
|
},
|
||||||
|
key: this.rowKey ? row._rowKey : index,
|
||||||
|
nativeOn: {
|
||||||
|
mouseenter: (e) => this.handleMouseIn(row._index, e),
|
||||||
|
mouseleave: (e) => this.handleMouseOut(row._index, e),
|
||||||
|
click: (e) => this.clickCurrentRow(row._index, e),
|
||||||
|
dblclick: (e) => this.dblclickCurrentRow(row._index, e)
|
||||||
|
}
|
||||||
|
}, $tds);
|
||||||
|
|
||||||
|
nodes.push($tableTr);
|
||||||
|
|
||||||
|
if (row.children && row.children.length) {
|
||||||
|
level++;
|
||||||
|
this.getChildNode(h, row, nodes, level, level);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return nodes;
|
||||||
|
} else {
|
||||||
|
return nodes;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
render (h) {
|
||||||
|
let $cols = [];
|
||||||
|
this.columns.forEach((column, index) => {
|
||||||
|
const $col = h('col', {
|
||||||
|
attrs: {
|
||||||
|
width: this.setCellWidth(column)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$cols.push($col);
|
||||||
|
});
|
||||||
|
const $colgroup = h('colgroup', {}, $cols);
|
||||||
|
|
||||||
|
let $tableTrs = [];
|
||||||
|
this.data.forEach((row, index) => {
|
||||||
|
let $tds = [];
|
||||||
|
|
||||||
|
this.columns.forEach((column, colIndex) => {
|
||||||
|
if (this.showWithSpan(row, column, index, colIndex)) {
|
||||||
|
const $tableCell = h(TableCell, {
|
||||||
|
props: {
|
||||||
|
fixed: this.fixed,
|
||||||
|
'prefix-cls': this.prefixCls,
|
||||||
|
row: row,
|
||||||
|
column: column,
|
||||||
|
'natural-index': index,
|
||||||
|
index: row._index,
|
||||||
|
checked: this.rowChecked(row._index),
|
||||||
|
disabled: this.rowDisabled(row._index),
|
||||||
|
expanded: this.rowExpanded(row._index)
|
||||||
|
},
|
||||||
|
key: column._columnKey,
|
||||||
|
});
|
||||||
|
|
||||||
|
const $td = h('td', {
|
||||||
|
class: this.alignCls(column, row),
|
||||||
|
attrs: this.getSpan(row, column, index, colIndex)
|
||||||
|
}, [$tableCell]);
|
||||||
|
$tds.push($td);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const $tableTr = h(TableTr, {
|
||||||
|
props: {
|
||||||
|
draggable: this.draggable,
|
||||||
|
row: row,
|
||||||
|
'prefix-cls': this.prefixCls
|
||||||
|
},
|
||||||
|
key: this.rowKey ? row._rowKey : index,
|
||||||
|
nativeOn: {
|
||||||
|
mouseenter: (e) => this.handleMouseIn(row._index, e),
|
||||||
|
mouseleave: (e) => this.handleMouseOut(row._index, e),
|
||||||
|
click: (e) => this.clickCurrentRow(row._index, e),
|
||||||
|
dblclick: (e) => this.dblclickCurrentRow(row._index, e)
|
||||||
|
}
|
||||||
|
}, $tds);
|
||||||
|
$tableTrs.push($tableTr);
|
||||||
|
|
||||||
|
// 可展开
|
||||||
|
if (this.rowExpanded(row._index)) {
|
||||||
|
const $Expand = h(Expand, {
|
||||||
|
props: {
|
||||||
|
row: row,
|
||||||
|
render: this.expandRender,
|
||||||
|
index: row._index
|
||||||
|
},
|
||||||
|
key: this.rowKey ? row._rowKey : index
|
||||||
|
});
|
||||||
|
const $td = h('td', {
|
||||||
|
attrs: {
|
||||||
|
colspan: this.columns.length
|
||||||
|
},
|
||||||
|
class: this.prefixCls + '-expanded-cell'
|
||||||
|
}, [$Expand]);
|
||||||
|
const $tr = h('tr', {
|
||||||
|
class: {
|
||||||
|
[this.prefixCls + '-expanded-hidden']: this.fixed
|
||||||
|
}
|
||||||
|
}, [$td]);
|
||||||
|
$tableTrs.push($tr);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 子数据
|
||||||
|
if (row.children && row.children.length) {
|
||||||
|
const $childNodes = this.getChildNode(h, row, []);
|
||||||
|
$childNodes.forEach(item => {
|
||||||
|
$tableTrs.push(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const $tbody = h('tbody', {
|
||||||
|
class: this.prefixCls + '-tbody'
|
||||||
|
}, [$tableTrs]);
|
||||||
|
|
||||||
|
return h('table', {
|
||||||
|
attrs: {
|
||||||
|
cellspacing: '0',
|
||||||
|
cellpadding: '0',
|
||||||
|
border: '0'
|
||||||
|
},
|
||||||
|
style: this.styleObject
|
||||||
|
}, [$colgroup, $tbody]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -256,6 +256,11 @@
|
||||||
// 4.0.0
|
// 4.0.0
|
||||||
sumText: {
|
sumText: {
|
||||||
type: String
|
type: String
|
||||||
|
},
|
||||||
|
// 4.1.0
|
||||||
|
indentSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 16
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
|
|
@ -925,9 +930,27 @@
|
||||||
data.forEach((row, index) => {
|
data.forEach((row, index) => {
|
||||||
row._index = index;
|
row._index = index;
|
||||||
row._rowKey = rowKey++;
|
row._rowKey = rowKey++;
|
||||||
|
if (row.child && row.children.length) {
|
||||||
|
row.children = this.makeChildrenData(row);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
return data;
|
return data;
|
||||||
},
|
},
|
||||||
|
makeChildrenData (data) {
|
||||||
|
if (data.children && data.children.length) {
|
||||||
|
data.children.map((row, index) => {
|
||||||
|
const newRow = deepCopy(row);
|
||||||
|
newRow._index = index;
|
||||||
|
newRow._rowKey = rowKey++;
|
||||||
|
if (newRow.children && newRow.children.length) {
|
||||||
|
newRow.children = this.makeChildrenData(newRow);
|
||||||
|
}
|
||||||
|
return newRow;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
},
|
||||||
makeDataWithSort () {
|
makeDataWithSort () {
|
||||||
let data = this.makeData();
|
let data = this.makeData();
|
||||||
let sortType = 'normal';
|
let sortType = 'normal';
|
||||||
|
|
@ -955,35 +978,60 @@
|
||||||
this.cloneColumns.forEach(col => data = this.filterData(data, col));
|
this.cloneColumns.forEach(col => data = this.filterData(data, col));
|
||||||
return data;
|
return data;
|
||||||
},
|
},
|
||||||
|
makeObjBaseData (row) {
|
||||||
|
const newRow = deepCopy(row);
|
||||||
|
newRow._isHover = false;
|
||||||
|
if (newRow._disabled) {
|
||||||
|
newRow._isDisabled = newRow._disabled;
|
||||||
|
} else {
|
||||||
|
newRow._isDisabled = false;
|
||||||
|
}
|
||||||
|
if (newRow._checked) {
|
||||||
|
newRow._isChecked = newRow._checked;
|
||||||
|
} else {
|
||||||
|
newRow._isChecked = false;
|
||||||
|
}
|
||||||
|
if (newRow._expanded) {
|
||||||
|
newRow._isExpanded = newRow._expanded;
|
||||||
|
} else {
|
||||||
|
newRow._isExpanded = false;
|
||||||
|
}
|
||||||
|
if (newRow._highlight) {
|
||||||
|
newRow._isHighlight = newRow._highlight;
|
||||||
|
} else {
|
||||||
|
newRow._isHighlight = false;
|
||||||
|
}
|
||||||
|
return newRow;
|
||||||
|
},
|
||||||
makeObjData () {
|
makeObjData () {
|
||||||
let data = {};
|
let data = {};
|
||||||
this.data.forEach((row, index) => {
|
this.data.forEach((row, index) => {
|
||||||
const newRow = deepCopy(row);// todo 直接替换
|
const newRow = this.makeObjBaseData(row);
|
||||||
newRow._isHover = false;
|
if (newRow.children && newRow.children.length) {
|
||||||
if (newRow._disabled) {
|
if (newRow._showChildren) {
|
||||||
newRow._isDisabled = newRow._disabled;
|
newRow._isShowChildren = newRow._showChildren;
|
||||||
} else {
|
} else {
|
||||||
newRow._isDisabled = false;
|
newRow._isShowChildren = false;
|
||||||
}
|
}
|
||||||
if (newRow._checked) {
|
newRow.children = this.makeChildrenObjData(newRow);
|
||||||
newRow._isChecked = newRow._checked;
|
|
||||||
} else {
|
|
||||||
newRow._isChecked = false;
|
|
||||||
}
|
|
||||||
if (newRow._expanded) {
|
|
||||||
newRow._isExpanded = newRow._expanded;
|
|
||||||
} else {
|
|
||||||
newRow._isExpanded = false;
|
|
||||||
}
|
|
||||||
if (newRow._highlight) {
|
|
||||||
newRow._isHighlight = newRow._highlight;
|
|
||||||
} else {
|
|
||||||
newRow._isHighlight = false;
|
|
||||||
}
|
}
|
||||||
data[index] = newRow;
|
data[index] = newRow;
|
||||||
});
|
});
|
||||||
return data;
|
return data;
|
||||||
},
|
},
|
||||||
|
makeChildrenObjData (data) {
|
||||||
|
if (data.children && data.children.length) {
|
||||||
|
data.children.map(row => {
|
||||||
|
const newRow = this.makeObjBaseData(row);
|
||||||
|
if (newRow.children && newRow.children.length) {
|
||||||
|
newRow.children = this.makeChildrenObjData(newRow);
|
||||||
|
}
|
||||||
|
return newRow;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
},
|
||||||
// 修改列，设置一个隐藏的 id，便于后面的多级表头寻找对应的列，否则找不到
|
// 修改列，设置一个隐藏的 id，便于后面的多级表头寻找对应的列，否则找不到
|
||||||
makeColumnsId (columns) {
|
makeColumnsId (columns) {
|
||||||
return columns.map(item => {
|
return columns.map(item => {
|
||||||
|
|
|
||||||
|
|
@ -246,6 +246,40 @@
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-tree{
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border: 1px solid @border-color-base;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: #fff;
|
||||||
|
line-height: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
vertical-align: middle;
|
||||||
|
transition: color @transition-time @ease-in-out, border-color @transition-time @ease-in-out;
|
||||||
|
|
||||||
|
&-empty{
|
||||||
|
cursor: default;
|
||||||
|
color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: @primary-color;
|
||||||
|
border-color: @primary-color;
|
||||||
|
}
|
||||||
|
&-empty:hover{
|
||||||
|
color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-level{
|
||||||
|
display: inline-block;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&-hidden{
|
&-hidden{
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue