fixex #1353
This commit is contained in:
梁灏
parent
82d90c4f8f
commit
68b308ee83
4 changed files with 138 additions and 60 deletions
|
|
@ -1,57 +1,29 @@
|
||||||
<template>
|
<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>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import etable from '../components/table.vue';
|
|
||||||
import test from '../components/test.vue';
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
columns5: [
|
tableData3: [
|
||||||
{
|
|
||||||
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: [
|
|
||||||
{
|
{
|
||||||
name: '王小明',
|
name: '王小明',
|
||||||
age: 18,
|
age: 18,
|
||||||
|
|
@ -60,7 +32,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '张小刚',
|
name: '张小刚',
|
||||||
age: 25,
|
age: 24,
|
||||||
address: '北京市海淀区西二旗',
|
address: '北京市海淀区西二旗',
|
||||||
date: '2016-10-01'
|
date: '2016-10-01'
|
||||||
},
|
},
|
||||||
|
|
@ -76,14 +48,112 @@
|
||||||
address: '深圳市南山区深南大道',
|
address: '深圳市南山区深南大道',
|
||||||
date: '2016-10-04'
|
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'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
methods: {
|
tableColumns3 () {
|
||||||
onSelect (value) {
|
let columns = [];
|
||||||
window.alert(value);
|
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>
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
<template v-for="(row, index) in data">
|
<template v-for="(row, index) in data">
|
||||||
<table-tr
|
<table-tr
|
||||||
:row="row"
|
:row="row"
|
||||||
|
:key="row._rowKey"
|
||||||
:prefix-cls="prefixCls"
|
:prefix-cls="prefixCls"
|
||||||
@mouseenter.native.stop="handleMouseIn(row._index)"
|
@mouseenter.native.stop="handleMouseIn(row._index)"
|
||||||
@mouseleave.native.stop="handleMouseOut(row._index)"
|
@mouseleave.native.stop="handleMouseOut(row._index)"
|
||||||
|
|
@ -17,7 +18,7 @@
|
||||||
:fixed="fixed"
|
:fixed="fixed"
|
||||||
:prefix-cls="prefixCls"
|
:prefix-cls="prefixCls"
|
||||||
:row="row"
|
:row="row"
|
||||||
:key="row"
|
:key="column._columnKey"
|
||||||
:column="column"
|
:column="column"
|
||||||
:natural-index="index"
|
:natural-index="index"
|
||||||
:index="row._index"
|
:index="row._index"
|
||||||
|
|
@ -29,7 +30,7 @@
|
||||||
</table-tr>
|
</table-tr>
|
||||||
<tr v-if="rowExpanded(row._index)">
|
<tr v-if="rowExpanded(row._index)">
|
||||||
<td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
|
<td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
|
||||||
<Expand :key="row" :row="row" :render="expandRender" :index="row._index"></Expand>
|
<Expand :key="row._rowKey" :row="row" :render="expandRender" :index="row._index"></Expand>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
<div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple">
|
<div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple">
|
||||||
<div :class="[prefixCls + '-filter-list-item']">
|
<div :class="[prefixCls + '-filter-list-item']">
|
||||||
<checkbox-group v-model="column._filterChecked">
|
<checkbox-group v-model="column._filterChecked">
|
||||||
<checkbox v-for="item in column.filters" :key="item" :label="item.value">{{ item.label }}</checkbox>
|
<checkbox v-for="item in column.filters" :key="column._columnKey" :label="item.value">{{ item.label }}</checkbox>
|
||||||
</checkbox-group>
|
</checkbox-group>
|
||||||
</div>
|
</div>
|
||||||
<div :class="[prefixCls + '-filter-footer']">
|
<div :class="[prefixCls + '-filter-footer']">
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
:styleObject="fixedTableStyle"
|
:styleObject="fixedTableStyle"
|
||||||
:columns="leftFixedColumns"
|
:columns="leftFixedColumns"
|
||||||
:obj-data="objData"
|
:obj-data="objData"
|
||||||
:columns-width.sync="columnsWidth"
|
:columns-width="columnsWidth"
|
||||||
:data="rebuildData"></table-head>
|
:data="rebuildData"></table-head>
|
||||||
</div>
|
</div>
|
||||||
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody">
|
<div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" ref="fixedBody">
|
||||||
|
|
@ -95,6 +95,9 @@
|
||||||
|
|
||||||
const prefixCls = 'ivu-table';
|
const prefixCls = 'ivu-table';
|
||||||
|
|
||||||
|
let rowKey = 1;
|
||||||
|
let columnKey = 1;
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Table',
|
name: 'Table',
|
||||||
mixins: [ Locale ],
|
mixins: [ Locale ],
|
||||||
|
|
@ -562,7 +565,10 @@
|
||||||
},
|
},
|
||||||
makeData () {
|
makeData () {
|
||||||
let data = deepCopy(this.data);
|
let data = deepCopy(this.data);
|
||||||
data.forEach((row, index) => row._index = index);
|
data.forEach((row, index) => {
|
||||||
|
row._index = index;
|
||||||
|
row._rowKey = rowKey++;
|
||||||
|
});
|
||||||
return data;
|
return data;
|
||||||
},
|
},
|
||||||
makeDataWithSort () {
|
makeDataWithSort () {
|
||||||
|
|
@ -629,6 +635,7 @@
|
||||||
|
|
||||||
columns.forEach((column, index) => {
|
columns.forEach((column, index) => {
|
||||||
column._index = index;
|
column._index = index;
|
||||||
|
column._columnKey = columnKey++;
|
||||||
column._width = column.width ? column.width : ''; // update in handleResize()
|
column._width = column.width ? column.width : ''; // update in handleResize()
|
||||||
column._sortType = 'normal';
|
column._sortType = 'normal';
|
||||||
column._filterVisible = false;
|
column._filterVisible = false;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue