fixed #658
This commit is contained in:
梁灏
parent
548eac43fe
commit
51356c2cd2
2 changed files with 113 additions and 161 deletions
|
|
@ -1,169 +1,33 @@
|
||||||
<!--<template>-->
|
|
||||||
<!--<div>-->
|
|
||||||
<!--<Table-->
|
|
||||||
<!--width="500"-->
|
|
||||||
<!--border-->
|
|
||||||
<!--highlight-row-->
|
|
||||||
<!--:columns="columns2"-->
|
|
||||||
<!--@on-selection-change="change2"-->
|
|
||||||
<!--:data="data3"></Table>-->
|
|
||||||
<!--<Button @click="addData">添加数据</Button>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</template>-->
|
|
||||||
<!--<script>-->
|
|
||||||
<!--import test from '../components/test.vue';-->
|
|
||||||
<!--export default {-->
|
|
||||||
<!--data () {-->
|
|
||||||
<!--return {-->
|
|
||||||
<!--columns2: [-->
|
|
||||||
<!--// {-->
|
|
||||||
<!--// type: 'selection',-->
|
|
||||||
<!--// width: 60,-->
|
|
||||||
<!--// align: 'center'-->
|
|
||||||
<!--// },-->
|
|
||||||
<!--{-->
|
|
||||||
<!--title: '姓名',-->
|
|
||||||
<!--key: 'name',-->
|
|
||||||
<!--width: 100,-->
|
|
||||||
<!--// sortable: true,-->
|
|
||||||
<!--fixed: 'right',-->
|
|
||||||
<!--render: (h, params) => {-->
|
|
||||||
<!--return h('div', [-->
|
|
||||||
<!--h('Button', {-->
|
|
||||||
<!--props: {-->
|
|
||||||
<!--type: 'primary',-->
|
|
||||||
<!--size: 'small'-->
|
|
||||||
<!--},-->
|
|
||||||
<!--on: {-->
|
|
||||||
<!--click: this.edit-->
|
|
||||||
<!--},-->
|
|
||||||
<!--}, '修改')-->
|
|
||||||
<!--]);-->
|
|
||||||
<!--}-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--title: '年龄',-->
|
|
||||||
<!--key: 'age',-->
|
|
||||||
<!--sortable: true,-->
|
|
||||||
<!--// width: 100-->
|
|
||||||
<!--},-->
|
|
||||||
<!--{-->
|
|
||||||
<!--title: '省份',-->
|
|
||||||
<!--key: 'province',-->
|
|
||||||
<!--sortable: true,-->
|
|
||||||
<!--// fixed: 'right',-->
|
|
||||||
<!--// width: 100-->
|
|
||||||
<!--},-->
|
|
||||||
<!--// {-->
|
|
||||||
<!--// title: '市区',-->
|
|
||||||
<!--// key: 'city',-->
|
|
||||||
<!--// width: 100-->
|
|
||||||
<!--// },-->
|
|
||||||
<!--// {-->
|
|
||||||
<!--// title: '地址',-->
|
|
||||||
<!--// key: 'address',-->
|
|
||||||
<!--// width: 200-->
|
|
||||||
<!--// },-->
|
|
||||||
<!--// {-->
|
|
||||||
<!--// title: '邮编',-->
|
|
||||||
<!--// key: 'zip',-->
|
|
||||||
<!--// width: 100-->
|
|
||||||
<!--// },-->
|
|
||||||
<!--// {-->
|
|
||||||
<!--// title: '操作',-->
|
|
||||||
<!--// key: 'action',-->
|
|
||||||
<!--// fixed: 'right',-->
|
|
||||||
<!--// width: 120,-->
|
|
||||||
<!--// render: (h, params) => {-->
|
|
||||||
<!--// return h(test);-->
|
|
||||||
<!--// }-->
|
|
||||||
<!--// }-->
|
|
||||||
<!--],-->
|
|
||||||
<!--data3: [-->
|
|
||||||
<!--// {-->
|
|
||||||
<!--// 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-->
|
|
||||||
<!--// }-->
|
|
||||||
<!--]-->
|
|
||||||
<!--}-->
|
|
||||||
<!--},-->
|
|
||||||
<!--methods: {-->
|
|
||||||
<!--change1 (d, l) {-->
|
|
||||||
<!--// console.log(d)-->
|
|
||||||
<!--// console.log(l)-->
|
|
||||||
<!--},-->
|
|
||||||
<!--change2 (d, l) {-->
|
|
||||||
<!--console.log(d);-->
|
|
||||||
<!--console.log(l);-->
|
|
||||||
<!--},-->
|
|
||||||
<!--addData () {-->
|
|
||||||
<!--this.data3.push({-->
|
|
||||||
<!--name: '周小伟',-->
|
|
||||||
<!--age: 26,-->
|
|
||||||
<!--address: '深圳市南山区深南大道',-->
|
|
||||||
<!--province: '广东',-->
|
|
||||||
<!--city: '南山区',-->
|
|
||||||
<!--zip: 100000-->
|
|
||||||
<!--})-->
|
|
||||||
<!--}-->
|
|
||||||
<!--}-->
|
|
||||||
<!--}-->
|
|
||||||
<!--</script>-->
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<i-table :data="dtData" :height="400" :columns="dtCols" border highlight-row></i-table>
|
<Table
|
||||||
<Button type="ghost" @click="addData"> add data</Button>
|
width="500"
|
||||||
|
height="200"
|
||||||
|
border
|
||||||
|
highlight-row
|
||||||
|
:columns="columns2"
|
||||||
|
@on-selection-change="change2"
|
||||||
|
:data="data3"></Table>
|
||||||
|
<Button @click="addData">添加数据</Button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import test from '../components/test.vue';
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data () {
|
||||||
return{
|
return {
|
||||||
dtData:[],
|
columns2: [
|
||||||
dtCols:[
|
// {
|
||||||
|
// type: 'selection',
|
||||||
|
// width: 60,
|
||||||
|
// align: 'center'
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
type: 'selection',
|
title: '姓名',
|
||||||
width: 60,
|
|
||||||
align: 'center'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '分类名称',
|
|
||||||
key: 'name',
|
key: 'name',
|
||||||
sortable: true
|
width: 100,
|
||||||
},
|
// sortable: true,
|
||||||
{
|
// fixed: 'right',
|
||||||
title: '操作',
|
|
||||||
fixed: 'right',
|
|
||||||
width: 120,
|
|
||||||
render: (h, params) => {
|
render: (h, params) => {
|
||||||
return h('div', [
|
return h('div', [
|
||||||
h('Button', {
|
h('Button', {
|
||||||
|
|
@ -177,15 +41,102 @@
|
||||||
}, '修改')
|
}, '修改')
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
title: '年龄',
|
||||||
|
key: 'age',
|
||||||
|
sortable: true,
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '省份',
|
||||||
|
key: 'province',
|
||||||
|
sortable: true,
|
||||||
|
// fixed: 'right',
|
||||||
|
// width: 100
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title: '市区',
|
||||||
|
// key: 'city',
|
||||||
|
// width: 100
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '地址',
|
||||||
|
// key: 'address',
|
||||||
|
// width: 200
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '邮编',
|
||||||
|
// key: 'zip',
|
||||||
|
// width: 100
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: '操作',
|
||||||
|
// key: 'action',
|
||||||
|
// fixed: 'right',
|
||||||
|
// width: 120,
|
||||||
|
// render: (h, params) => {
|
||||||
|
// return h(test);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
],
|
||||||
|
data3: [
|
||||||
|
// {
|
||||||
|
// 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
|
||||||
|
// }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
change1 (d, l) {
|
||||||
|
// console.log(d)
|
||||||
|
// console.log(l)
|
||||||
|
},
|
||||||
|
change2 (d, l) {
|
||||||
|
console.log(d);
|
||||||
|
console.log(l);
|
||||||
|
},
|
||||||
addData () {
|
addData () {
|
||||||
this.dtData.push({
|
this.data3.push({
|
||||||
name: '发送到附件是'
|
name: '周小伟',
|
||||||
|
age: 26,
|
||||||
|
address: '深圳市南山区深南大道',
|
||||||
|
province: '广东',
|
||||||
|
city: '南山区',
|
||||||
|
zip: 100000
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
edit () {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,7 @@ export default {
|
||||||
const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
|
const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
|
||||||
if (firstFixedIndex === index) width += this.$parent.scrollBarWidth;
|
if (firstFixedIndex === index) width += this.$parent.scrollBarWidth;
|
||||||
}
|
}
|
||||||
|
if (width === '0') width = '';
|
||||||
return width;
|
return width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue