publish 0.9.9-rc-6
Table size add default Table height bug fixed
This commit is contained in:
梁灏
parent
728d5812d2
commit
f2a051a100
3 changed files with 145 additions and 82 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iview",
|
"name": "iview",
|
||||||
"version": "0.9.9-rc-5",
|
"version": "0.9.9-rc-6",
|
||||||
"title": "iView",
|
"title": "iView",
|
||||||
"description": "A high quality UI components Library with Vue.js",
|
"description": "A high quality UI components Library with Vue.js",
|
||||||
"homepage": "http://www.iviewui.com",
|
"homepage": "http://www.iviewui.com",
|
||||||
|
|
|
||||||
|
|
@ -92,7 +92,7 @@
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
validator (value) {
|
validator (value) {
|
||||||
return oneOf(value, ['small', 'large']);
|
return oneOf(value, ['small', 'large', 'default']);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
|
|
@ -341,6 +341,8 @@
|
||||||
const footerHeight = parseInt(getStyle(this.$els.footer, 'height')) || 0;
|
const footerHeight = parseInt(getStyle(this.$els.footer, 'height')) || 0;
|
||||||
this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
|
this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
|
||||||
})
|
})
|
||||||
|
} else {
|
||||||
|
this.bodyHeight = 0;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
hideColumnFilter () {
|
hideColumnFilter () {
|
||||||
|
|
@ -542,6 +544,7 @@
|
||||||
},
|
},
|
||||||
columns: {
|
columns: {
|
||||||
handler () {
|
handler () {
|
||||||
|
// todo 这里有性能问题，可能是左右固定计算属性影响的
|
||||||
this.cloneColumns = this.makeColumns();
|
this.cloneColumns = this.makeColumns();
|
||||||
this.rebuildData = this.makeDataWithSortAndFilter();
|
this.rebuildData = this.makeDataWithSortAndFilter();
|
||||||
this.handleResize();
|
this.handleResize();
|
||||||
|
|
|
||||||
|
|
@ -1,90 +1,150 @@
|
||||||
<template>
|
<template>
|
||||||
<i-table border :columns="columns6" :data="data5"></i-table>
|
<checkbox-group :model.sync="tableColumnsChecked" @on-change="changeTableColumns">
|
||||||
|
<checkbox value="show">展示</checkbox>
|
||||||
|
<checkbox value="weak">唤醒</checkbox>
|
||||||
|
<checkbox value="signin">登录</checkbox>
|
||||||
|
<checkbox value="click">点击</checkbox>
|
||||||
|
<checkbox value="active">激活</checkbox>
|
||||||
|
<checkbox value="day7">7日留存</checkbox>
|
||||||
|
<checkbox value="day30">30日留存</checkbox>
|
||||||
|
<checkbox value="tomorrow">次日留存</checkbox>
|
||||||
|
<checkbox value="day">日活跃</checkbox>
|
||||||
|
<checkbox value="week">周活跃</checkbox>
|
||||||
|
<checkbox value="month">月活跃</checkbox>
|
||||||
|
</checkbox-group>
|
||||||
|
<i-table :content="self" :data="tableData2" :columns="tableColumns2" border></i-table>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
columns6: [
|
self: this,
|
||||||
{
|
tableData2: this.mockTableData2(),
|
||||||
title: '日期',
|
tableColumns2: [],
|
||||||
key: 'date'
|
tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month']
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '姓名',
|
|
||||||
key: 'name'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '年龄',
|
|
||||||
key: 'age',
|
|
||||||
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',
|
|
||||||
filters: [
|
|
||||||
{
|
|
||||||
label: '北京',
|
|
||||||
value: '北京'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '上海',
|
|
||||||
value: '上海'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '深圳',
|
|
||||||
value: '深圳'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
filterMethod (value, row) {
|
|
||||||
return row.address.indexOf(value) > -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
data5: [
|
|
||||||
{
|
|
||||||
name: '王小明',
|
|
||||||
age: 18,
|
|
||||||
address: '北京市朝阳区芍药居',
|
|
||||||
date: '2016-10-03'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '张小刚',
|
|
||||||
age: 25,
|
|
||||||
address: '北京市海淀区西二旗',
|
|
||||||
date: '2016-10-01'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '李小红',
|
|
||||||
age: 30,
|
|
||||||
address: '上海市浦东新区世纪大道',
|
|
||||||
date: '2016-10-02'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '周小伟',
|
|
||||||
age: 26,
|
|
||||||
address: '深圳市南山区深南大道',
|
|
||||||
date: '2016-10-04'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
mockTableData2 () {
|
||||||
|
let data = [];
|
||||||
|
function getNum() {
|
||||||
|
return Math.floor(Math.random () * 10000 + 1);
|
||||||
|
}
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
data.push({
|
||||||
|
name: '推广名称' + (i+1),
|
||||||
|
fav: 0,
|
||||||
|
show: getNum(),
|
||||||
|
weak: getNum(),
|
||||||
|
signin: getNum(),
|
||||||
|
click: getNum(),
|
||||||
|
active: getNum(),
|
||||||
|
day7: getNum(),
|
||||||
|
day30: getNum(),
|
||||||
|
tomorrow: getNum(),
|
||||||
|
day: getNum(),
|
||||||
|
week: getNum(),
|
||||||
|
month: getNum()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
getTable2Columns () {
|
||||||
|
const table2ColumnList = {
|
||||||
|
name: {
|
||||||
|
title: '名称',
|
||||||
|
key: 'name',
|
||||||
|
fixed: 'left',
|
||||||
|
width: 200,
|
||||||
|
render (row, column, index) {
|
||||||
|
return `<Icon style="cursor: pointer" type="ios-star-outline" v-if="tableData2[${index}].fav === 0" @click="toggleFav(${index})"></Icon>
|
||||||
|
<Icon style="cursor: pointer;color:#f60" type="ios-star" v-if="tableData2[${index}].fav === 1" @click="toggleFav(${index})"></Icon>
|
||||||
|
<span>${row.name}</span>`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
show: {
|
||||||
|
title: '展示',
|
||||||
|
key: 'show',
|
||||||
|
width: 150,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
weak: {
|
||||||
|
title: '唤醒',
|
||||||
|
key: 'weak',
|
||||||
|
width: 150,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
signin: {
|
||||||
|
title: '登录',
|
||||||
|
key: 'signin',
|
||||||
|
width: 150,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
click: {
|
||||||
|
title: '点击',
|
||||||
|
key: 'click',
|
||||||
|
width: 150,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
title: '激活',
|
||||||
|
key: 'active',
|
||||||
|
width: 150,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
day7: {
|
||||||
|
title: '7日留存',
|
||||||
|
key: 'day7',
|
||||||
|
width: 150,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
day30: {
|
||||||
|
title: '30日留存',
|
||||||
|
key: 'day30',
|
||||||
|
width: 150,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
tomorrow: {
|
||||||
|
title: '次日留存',
|
||||||
|
key: 'tomorrow',
|
||||||
|
width: 150,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
day: {
|
||||||
|
title: '日活跃',
|
||||||
|
key: 'day',
|
||||||
|
width: 150,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
week: {
|
||||||
|
title: '周活跃',
|
||||||
|
key: 'week',
|
||||||
|
width: 150,
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
month: {
|
||||||
|
title: '月活跃',
|
||||||
|
key: 'month',
|
||||||
|
width: 150,
|
||||||
|
sortable: true
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
let data = [table2ColumnList.name];
|
||||||
|
|
||||||
|
this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));
|
||||||
|
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
changeTableColumns () {
|
||||||
|
this.tableColumns2 = this.getTable2Columns();
|
||||||
|
},
|
||||||
|
toggleFav (index) {
|
||||||
|
this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
ready () {
|
||||||
|
this.changeTableColumns();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue