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

fixed #2823

Browse source
This commit is contained in:
梁灏 2018-01-19 18:01:21 +08:00
parent b34e09b8f9
commit bb49347b35
2 changed files with 28 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
examples/routers/table.vue
View file

@ -1,117 +1,21 @@
<!--<template>-->
<!--<Table border :columns="columns6" :data="data5"></Table>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--columns6: [-->
<!--{-->
<!--title: 'Date',-->
<!--key: 'date'-->
<!--},-->
<!--{-->
<!--title: 'Name',-->
<!--key: 'name'-->
<!--},-->
<!--{-->
<!--title: 'Gender',-->
<!--key: 'gender'-->
<!--},-->
<!--{-->
<!--title: 'Age',-->
<!--key: 'age',-->
<!--fixed: 'left',-->
<!--// fixed: 'right',-->
<!--filters: [-->
<!--{-->
<!--label: 'Greater than 25',-->
<!--value: 1-->
<!--},-->
<!--{-->
<!--label: 'Less than 25',-->
<!--value: 2-->
<!--}-->
<!--],-->
<!--filterMultiple: false,-->
<!--filterMethod (value, row) {-->
<!--if (value === 1) {-->
<!--return row.age > 25;-->
<!--} else if (value === 2) {-->
<!--return row.age < 25;-->
<!--}-->
<!--}-->
<!--},-->
<!--{-->
<!--title: 'Address',-->
<!--key: 'address',-->
<!--fixed: 'left',-->
<!--filters: [-->
<!--{-->
<!--label: 'New York',-->
<!--value: 'New York'-->
<!--},-->
<!--{-->
<!--label: 'London',-->
<!--value: 'London'-->
<!--},-->
<!--{-->
<!--label: 'Sydney',-->
<!--value: 'Sydney'-->
<!--}-->
<!--],-->
<!--filterMethod (value, row) {-->
<!--return row.address.indexOf(value) > -1;-->
<!--}-->
<!--}-->
<!--],-->
<!--data5: [-->
<!--{-->
<!--name: 'John Brown',-->
<!--age: 18,-->
<!--gender: 'male',-->
<!--address: 'New York No. 1 Lake Park',-->
<!--date: '2016-10-03'-->
<!--},-->
<!--{-->
<!--name: 'Jim Green',-->
<!--age: 24,-->
<!--gender: 'female',-->
<!--address: 'London No. 1 Lake Park',-->
<!--date: '2016-10-01'-->
<!--},-->
<!--{-->
<!--name: 'Joe Black',-->
<!--age: 30,-->
<!--gender: 'male',-->
<!--address: 'Sydney No. 1 Lake Park',-->
<!--date: '2016-10-02'-->
<!--},-->
<!--{-->
<!--name: 'Jon Snow',-->
<!--age: 26,-->
<!--gender: 'male',-->
<!--address: 'Ottawa No. 2 Lake Park',-->
<!--date: '2016-10-04'-->
<!--}-->
<!--],-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<Table border :columns="columns5" :data="data5"></Table> <div>
<Table border ref="selection" :columns="columns4" :data="data1"></Table>
<Button @click="handleSetData">Set Data</Button>
<Button @click="handleClearData">Clear Data</Button>
<Button @click="handleSelectAll(true)">Set all selected</Button>
<Button @click="handleSelectAll(false)">Cancel all selected</Button>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
columns5: [ columns4: [
{ {
title: 'Date', type: 'selection',
key: 'date', width: 60,
sortable: true align: 'center'
}, },
{ {
title: 'Name', title: 'Name',
@ -119,16 +23,24 @@
}, },
{ {
title: 'Age', title: 'Age',
key: 'age', key: 'age'
fixed: 'right',
sortable: true
}, },
{ {
title: 'Address', title: 'Address',
key: 'address' key: 'address'
} }
], ],
data5: [ data1: [
]
}
},
methods: {
handleSelectAll (status) {
this.$refs.selection.selectAll(status);
},
handleSetData () {
this.data1 = [
{ {
name: 'John Brown', name: 'John Brown',
age: 18, age: 18,
@ -153,7 +65,10 @@
address: 'Ottawa No. 2 Lake Park', address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04' date: '2016-10-04'
} }
] ];
},
handleClearData () {
this.data1 = [];
} }
} }
} }

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

@ -11,7 +11,7 @@
<span v-if="!column.renderHeader">{{ column.title || '' }}</span> <span v-if="!column.renderHeader">{{ column.title || '' }}</span>
<render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header> <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
</template> </template>
<template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template> <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" :disabled="!data.length" @on-change="selectAll"></Checkbox></template>
<template v-else> <template v-else>
<span v-if="!column.renderHeader" @click="handleSortByHead(index)">{{ column.title || '#' }}</span> <span v-if="!column.renderHeader" @click="handleSortByHead(index)">{{ column.title || '#' }}</span>
<render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header> <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>