drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

publish 0.9.9-rc-2

Browse source 
fixed Table autowidth
This commit is contained in:
梁灏 2016-11-30 14:56:32 +08:00
parent 872c1354b9
commit 5e7a3b293b
7 changed files with 35 additions and 259 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/iview.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 157 KiB

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "iview",
"version": "0.9.9-rc-1",
"version": "0.9.9-rc-2",
"title": "iView",
"description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com",

3
src/components/table/mixin.js
View file

@ -10,6 +10,9 @@ export default {
},
isPopperShow (column) {
return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
},
setCellWidth (index) {
return this.column[index].width ? this.column.width : this.columnsWidth[index];
}
}
}

6
src/components/table/table-body.vue
View file

@ -1,7 +1,7 @@
<template>
<table cellspacing="0" cellpadding="0" border="0" :style="style">
<colgroup>
<col v-for="column in columns" :width="setCellWidth(column, $index)">
<col v-for="item in setCellWidth" :width="setCellWidth($index)">
</colgroup>
<tbody :class="[prefixCls + '-tbody']">
<tr
@ -37,6 +37,7 @@
columns: Array,
data: Array, // rebuildData
objData: Object,
columnsWidth: Array,
fixed: {
type: [Boolean, String],
default: false
@ -56,9 +57,6 @@
rowChecked (_index) {
return this.objData[_index] && this.objData[_index]._isChecked;
},
setCellWidth (column, index) {
return this.$parent.setCellWidth(column, index);
},
rowClsName (_index) {
return this.$parent.rowClassName(this.objData[_index], _index);
},

6
src/components/table/table-head.vue
View file

@ -1,7 +1,7 @@
<template>
<table cellspacing="0" cellpadding="0" border="0" :style="style">
<colgroup>
<col v-for="column in columns" :width="setCellWidth(column, $index)">
<col v-for="item in setCellWidth" :width="setCellWidth($index)">
</colgroup>
<thead>
<tr>
@ -69,6 +69,7 @@
columns: Array,
objData: Object,
data: Array, // rebuildData
columnsWidth: Array,
fixed: {
type: [Boolean, String],
default: false
@ -97,9 +98,6 @@
}
]
},
setCellWidth (column, index) {
return this.$parent.setCellWidth(column, index);
},
renderHeader (column, $index) {
if ('renderHeader' in this.columns[$index]) {
return this.columns[$index].renderHeader(column, $index);

9
src/components/table/table.vue
View file

@ -8,6 +8,7 @@
:style="tableStyle"
:columns="cloneColumns"
:obj-data="objData"
:columns-width.sync="columnsWidth"
:data="rebuildData"></table-head>
</div>
<div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
@ -17,6 +18,7 @@
:style="tableStyle"
:columns="cloneColumns"
:data="rebuildData"
:columns-width.sync="columnsWidth"
:obj-data="objData"></table-body>
</div>
<div :class="[prefixCls + '-fixed']" :style="fixedTableStyle">
@ -27,6 +29,7 @@
:style="fixedTableStyle"
:columns="leftFixedColumns"
:obj-data="objData"
:columns-width.sync="columnsWidth"
:data="rebuildData"></table-head>
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
@ -36,6 +39,7 @@
:style="fixedTableStyle"
:columns="leftFixedColumns"
:data="rebuildData"
:columns-width.sync="columnsWidth"
:obj-data="objData"></table-body>
</div>
</div>
@ -47,6 +51,7 @@
:style="fixedRightTableStyle"
:columns="rightFixedColumns"
:obj-data="objData"
:columns-width.sync="columnsWidth"
:data="rebuildData"></table-head>
</div>
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
@ -56,6 +61,7 @@
:style="fixedRightTableStyle"
:columns="rightFixedColumns"
:data="rebuildData"
:columns-width.sync="columnsWidth"
:obj-data="objData"></table-body>
</div>
</div>
@ -247,9 +253,6 @@
});
});
},
setCellWidth (column, index) {
return column.width ? column.width : this.columnsWidth[index];
},
handleMouseIn (_index) {
if (this.objData[_index]._isHover) return;
this.objData[_index]._isHover = true;

268
test/routers/table.vue
View file

@ -1,273 +1,47 @@
<style>
body{
height: auto;
}
</style>
<template>
<div>
<!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
<br>
<i-table
width="850"
:height="height"
stripe
:border="true"
highlight-row
:show-header="true"
:columns="columns"
:data="data"
:row-class-name="rowClsName"
@on-current-change="current"
@on-select="select"
@on-selection-change="schange"
@on-select-all="sall"
@on-sort-change="sortChange">
<!--<div slot="header">表格标题</div>-->
<!--<div slot="footer">表格标题</div>-->
</i-table>
<br>
<i-button @click="showChildren">显示子节点</i-button>
<!--<i-table size="small" border stripe :columns="columns" :data="data"></i-table>-->
</div>
<i-table :columns="columns1" :data="data1"></i-table>
</template>
<script>
export default {
props: {
},
data () {
return {
columns: [
{
type: 'selection',
width: 90,
// fixed: 'left',
align: 'center'
},
{
type: 'index',
width: 50
},
columns1: [
{
title: '姓名',
key: 'name',
align: 'left',
// fixed: 'left',
sortable: true,
width: 100,
filters: [
{
label: '两个字',
value: 1
},
{
label: '三个字',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.name.length == 2;
} else if (value === 2) {
return row.name.length == 3;
}
}
},
{
title: '标签',
key: 'tag',
width: 100,
filters: [
{
label: '家',
value: 'home'
},
{
label: '公司',
value: 'company'
}
],
filterMethod (value, row) {
return row.tag === value;
},
// filteredValue: ['company'],
render (row) {
const type = `${row.tag}` === 'home' ? 'green' : 'red';
return `<tag color="${type}">${row.tag}</tag>`;
}
key: 'name'
},
{
title: '年龄',
key: 'age',
align: 'right',
// fixed: 'left',
sortable: true,
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;
}
}
// render (row) {
// return `<i-button>${row.age}</i-button>`
// }
key: 'age'
},
{
title: '地址',
key: 'address',
align: 'center',
// fixed: 'left',
width: 100,
// render (row, column, index) {
// if (row.edit) {
// return `<i-input :value.sync="data[${index}].name"></i-input>`;
// } else {
// return `<Tooltip content="${row.address}"><i-button @click="show(${index})">${row.name}</i-button></Tooltip>`;
// }
// }
},
{
title: '操作',
key: 'action',
// fixed: 'right',
width: 250,
render (row, column, index) {
return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`;
// return `<a href="#">${row.name}</a>`;
},
filters: [
{
label: '两个字',
value: 1
},
{
label: '三个字',
value: 2
}
],
filterMultiple: false,
filterMethod (value, row) {
if (value === 1) {
return row.name.length == 2;
} else if (value === 2) {
return row.name.length == 3;
}
}
key: 'address'
}
],
data: [
data1: [
{
name: '梁灏梁灏梁灏梁灏梁灏梁灏梁灏',
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
age: 25,
address: '北京市朝阳区',
edit: false,
tag: 'home',
action: 1
address: '北京市海淀区西二旗'
},
{
name: '段模',
age: 21,
address: '北京市海淀区',
edit: false,
tag: 'company',
action: 2
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
},
{
name: '刘天娇',
age: 27,
address: '北京市东城区',
edit: false,
tag: 'company',
action: 3
},
{
name: '胡国伟',
age: 22,
address: '北京市西城区',
edit: false,
tag: 'home',
action: 4
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
}
],
height: 200
]
}
},
computed: {
},
methods: {
show (name) {
this.$Message.info(name);
},
edit (index) {
// this.data[index].edit = true;
this.$Message.info(this.data[index].name);
},
current (newData, oldData) {
// console.log(newData);
// console.log(oldData);
},
select (a,b){
// console.log(a);
// console.log(b);
},
schange (a) {
// console.log(a)
},
sall (a) {
console.log(a)
},
rowClsName (row, index) {
if (index == 1) {
return 'row-success';
} else {
return '';
}
},
sortChange (data) {
console.log(data)
},
showChildren () {
console.log(this.$children)
}
},
ready () {
setTimeout(() => {
// this.columns[3].width = 300;
// this.columns[2].width = 150;
// return;
// this.height = 150;
// this.data.push({
// name: '刘天娇2',
// age: 272,
// address: '北京市东城区2',
// edit: false
// });
// this.data.splice(0, 1);
// this.columns.splice(2,1)
// this.data.push({
// name: '梁灏2',
// age: 25,
// address: '北京市朝阳区',
// edit: false,
// tag: 'home',
// action: 1
// })
}, 3000);
}
}
</script>
</script>