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

fixex #1353

Browse source
This commit is contained in:
梁灏 2017-07-14 14:52:54 +08:00
parent 82d90c4f8f
commit 68b308ee83
4 changed files with 138 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

180
examples/routers/table.vue
View file

@ -1,57 +1,29 @@
<template>
<Table border :columns="columns5" :data="data5" @on-select="onSelect(true)" @on-select-cancel="onSelect(false)"></Table>
<div>
<div style="margin: 10px">
显示边框 <i-switch v-model="showBorder" style="margin-right: 5px"></i-switch>
显示斑马纹 <i-switch v-model="showStripe" style="margin-right: 5px"></i-switch>
显示索引 <i-switch v-model="showIndex" style="margin-right: 5px"></i-switch>
显示多选框 <i-switch v-model="showCheckbox" style="margin-right: 5px"></i-switch>
显示表头 <i-switch v-model="showHeader" style="margin-right: 5px"></i-switch>
表格滚动 <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch>
<br>
<br>
表格尺寸
<Radio-group v-model="tableSize" type="button">
<Radio label="large">大</Radio>
<Radio label="default">中</Radio>
<Radio label="small">小</Radio>
</Radio-group>
</div>
<Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 250 : ''" :size="tableSize" :data="tableData3" :columns="tableColumns3"></Table>
</div>
</template>
<script>
import etable from '../components/table.vue';
import test from '../components/test.vue';
export default {
data () {
return {
columns5: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
type: 'expand',
render: (h) => {
console.log('______hover______');
return h(etable);
},
width: 50
},
{
title: '日期',
key: 'date',
sortable: true
},
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age',
sortable: true
},
{
title: '地址',
key: 'address'
},
{
title: '操作',
key: 'name',
render: (h, params) => {
return h(test, {
props: {
row: params.row
}
});
}
}
],
data5: [
tableData3: [
{
name: '王小明',
age: 18,
@ -60,7 +32,7 @@
},
{
name: '张小刚',
age: 25,
age: 24,
address: '北京市海淀区西二旗',
date: '2016-10-01'
},
@ -76,14 +48,112 @@
address: '深圳市南山区深南大道',
date: '2016-10-04'
},
]
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居',
date: '2016-10-03'
},
{
name: '张小刚',
age: 24,
address: '北京市海淀区西二旗',
date: '2016-10-01'
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道',
date: '2016-10-02'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道',
date: '2016-10-04'
}
],
showBorder: false,
showStripe: false,
showHeader: true,
showIndex: true,
showCheckbox: false,
fixedHeader: false,
tableSize: 'default'
}
},
methods: {
onSelect (value) {
window.alert(value);
computed: {
tableColumns3 () {
let columns = [];
if (this.showCheckbox) {
columns.push({
type: 'selection',
width: 60,
align: 'center'
})
}
if (this.showIndex) {
columns.push({
type: 'index',
width: 60,
align: 'center'
})
}
columns.push({
title: '日期',
key: 'date',
sortable: true
});
columns.push({
title: '姓名',
key: 'name'
});
columns.push({
title: '年龄',
key: 'age',
sortable: true,
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;
}
}
});
columns.push({
title: '地址',
key: 'address',
filters: [
{
label: '北京',
value: '北京'
},
{
label: '上海',
value: '上海'
},
{
label: '深圳',
value: '深圳'
}
],
filterMethod (value, row) {
return row.address.indexOf(value) > -1;
}
});
return columns;
}
}
}
</script>
</script>