lb-column.vue
2.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/*
* FileName: lb-column.vue
* Remark: element-column
* Project: lb-element-table
* Author: 任超
* File Created: Tuesday, 19th March 2019 9:58:23 am
* Last Modified: Tuesday, 19th March 2019 10:14:42 am
* Modified By: 任超
*/
<template>
<el-table-column v-bind="$attrs" v-on="$listeners" :prop="column.prop" :label="column.label" :type="column.type"
:index="column.index" :column-key="column.columnKey" :width="column.width" :min-width="column.minWidth"
:fixed="column.fixed" :scoped-slot="column.renderHeader" :sortable="column.sortable || false"
:sort-method="column.sortMethod" :sort-by="column.sortBy" :sort-orders="column.sortOrders"
:resizable="column.resizable || true" :formatter="column.formatter"
:show-overflow-tooltip="column.showOverflowTooltip || false" :align="column.align || align || 'center'"
:header-align="column.headerAlign || headerAlign || column.align || align || 'center'"
:class-name="column.className" :label-class-name="column.labelClassName" :selectable="column.selectable"
:reserve-selection="column.reserveSelection || false" :filters="column.filters"
:filter-placement="column.filterPlacement" :filter-multiple="column.filterMultiple"
:filter-method="column.filterMethod" :filtered-value="column.filteredValue">
<template slot="header" slot-scope="scope">
<lb-render v-if="column.renderHeader" :scope="scope" :render="column.renderHeader">
</lb-render>
<span v-else>{{ scope.column.label }}</span>
</template>
<template slot-scope="scope">
<lb-render :scope="scope" :render="column.render">
</lb-render>
</template>
<template v-if="column.children">
<lb-column v-for="(col, index) in column.children" :key="index" :column="col">
</lb-column>
</template>
</el-table-column>
</template>
<script>
import LbRender from './lb-render'
import forced from './forced.js'
import radio from './radio.js'
export default {
name: 'LbColumn',
props: {
column: Object,
headerAlign: String,
align: String
},
components: {
LbRender
},
methods: {
setColumn () {
if (this.column.type && this.column.type != 'radio') {
this.column.renderHeader = forced[this.column.type].renderHeader
this.column.render = this.column.render || forced[this.column.type].renderCell
}
if (this.column.type == 'radio') {
this.column.render = this.column.render || radio[this.column.type].renderCell
}
if (this.column.formatter) {
this.column.render = (h, scope) => {
return <span>{scope.column.formatter(scope.row, scope.column, scope.row, scope.$index)}</span>
}
}
if (!this.column.render) {
this.column.render = (h, scope) => {
return <span>{scope.row[scope.column.property]}</span>
}
}
}
},
watch: {
column: {
handler () {
this.setColumn()
},
immediate: true
}
}
}
</script>