update Table
update Table
This commit is contained in:
梁灏
parent
f23d6ba1ac
commit
3d6fa54b39
5 changed files with 288 additions and 74 deletions
|
|
@ -1,80 +1,273 @@
|
|||
<style>
|
||||
body{
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<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>
|
||||
<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/>
|
||||
<!--<br/>-->
|
||||
|
||||
<i-table
|
||||
border
|
||||
:columns="columns7"
|
||||
:data="[]"
|
||||
no-data-text="No Data"
|
||||
:highlight-row="true"
|
||||
@on-current-change="onCurrentChange"
|
||||
@on-dblclick="onDblclick">
|
||||
</i-table>
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns7"-->
|
||||
<!--:data="[]"-->
|
||||
<!--no-data-text="No Data"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<br/>
|
||||
<!--<br/>-->
|
||||
|
||||
<i-table
|
||||
border
|
||||
:columns="columns7"
|
||||
:data="[]"
|
||||
size="small"
|
||||
:highlight-row="true"
|
||||
@on-current-change="onCurrentChange"
|
||||
@on-dblclick="onDblclick">
|
||||
</i-table>
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns7"-->
|
||||
<!--:data="[]"-->
|
||||
<!--size="small"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<br/>
|
||||
<!--<br/>-->
|
||||
|
||||
<i-table
|
||||
border
|
||||
:columns="columns7"
|
||||
:data="[]"
|
||||
size="large"
|
||||
:highlight-row="true"
|
||||
@on-current-change="onCurrentChange"
|
||||
@on-dblclick="onDblclick">
|
||||
</i-table>
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns7"-->
|
||||
<!--:data="[]"-->
|
||||
<!--size="large"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<br/>
|
||||
<!--<br/>-->
|
||||
|
||||
<i-table
|
||||
border
|
||||
:columns="columns7"
|
||||
:data="data5"
|
||||
:highlight-row="true"
|
||||
@on-current-change="onCurrentChange"
|
||||
@on-dblclick="onDblclick">
|
||||
</i-table>
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns7"-->
|
||||
<!--:data="data5"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
|
||||
<br/>
|
||||
<!--<br/>-->
|
||||
|
||||
<i-table
|
||||
border
|
||||
:columns="columns6"
|
||||
width="500"
|
||||
:data="data5"
|
||||
:highlight-row="true"
|
||||
@on-current-change="onCurrentChange"
|
||||
@on-dblclick="onDblclick">
|
||||
</i-table>
|
||||
<!--<i-table-->
|
||||
<!--border-->
|
||||
<!--:columns="columns6"-->
|
||||
<!--width="500"-->
|
||||
<!--:data="data5"-->
|
||||
<!--:highlight-row="true"-->
|
||||
<!--@on-current-change="onCurrentChange"-->
|
||||
<!--@on-dblclick="onDblclick">-->
|
||||
<!--</i-table>-->
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns2: [
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
width: 100,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '省份',
|
||||
key: 'province',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: '市区',
|
||||
key: 'city',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
],
|
||||
data1: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居'
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗'
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道'
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
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',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue