Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
00fb6174 by yuanbo
Options

增加注释

1 parent 7d9803a1
Inline Side-by-side
Showing 2 changed files with 0 additions and 420 deletions
1 /*
2 * FileName: lb-column.vue
3 * Remark: element-column
4 * Project: lb-element-table
5 * Author: 任超
6 * File Created: Tuesday, 19th March 2019 9:58:23 am
7 * Last Modified: Tuesday, 19th March 2019 10:14:42 am
8 * Modified By: 任超
9 */
10
11 <template>
12 <el-table-column v-bind="$attrs" v-on="$listeners" :prop="column.prop" :label="column.label" :type="column.type"
13 :index="column.index" :column-key="column.columnKey" :width="column.width" :min-width="column.minWidth"
14 :fixed="column.fixed" :scoped-slot="column.renderHeader" :sortable="column.sortable || false"
15 :sort-method="column.sortMethod" :sort-by="column.sortBy" :sort-orders="column.sortOrders"
16 :resizable="column.resizable || true" :formatter="column.formatter"
17 :show-overflow-tooltip="column.showOverflowTooltip || false" :align="column.align || align || 'center'"
18 :header-align="column.headerAlign || headerAlign || column.align || align || 'center'"
19 :class-name="column.className" :label-class-name="column.labelClassName" :selectable="column.selectable"
20 :reserve-selection="column.reserveSelection || false" :filters="column.filters"
21 :filter-placement="column.filterPlacement" :filter-multiple="column.filterMultiple"
22 :filter-method="column.filterMethod" :filtered-value="column.filteredValue">
23 <template slot="header" slot-scope="scope">
24 <lb-render v-if="column.renderHeader" :scope="scope" :render="column.renderHeader">
25 </lb-render>
26 <span v-else>{{ scope.column.label }}</span>
27 </template>
28
29 <template slot-scope="scope">
30 <lb-render :scope="scope" :render="column.render">
31 </lb-render>
32 </template>
33
34 <template v-if="column.children">
35 <lb-column v-for="(col, index) in column.children" :key="index" :column="col">
36 </lb-column>
37 </template>
38 </el-table-column>
39 </template>
40
41 <script>
42 import LbRender from './LbRender'
43 import forced from './forced.js'
44 export default {
45 name: 'LbColumn',
46 props: {
47 column: Object,
48 headerAlign: String,
49 align: String
50 },
51 components: {
52 LbRender
53 },
54 methods: {
55 /**
56 * @description: setColumn
57 * @author: renchao
58 */
59 setColumn () {
60 if (this.column.type) {
61 this.column.renderHeader = forced[this.column.type].renderHeader
62 this.column.render = this.column.render || forced[this.column.type].renderCell
63 }
64 if (this.column.formatter) {
65 this.column.render = (h, scope) => {
66 return <span>{scope.column.formatter(scope.row, scope.column, scope.row, scope.$index)}</span>
67 }
68 }
69 if (!this.column.render) {
70 this.column.render = (h, scope) => {
71 return <span>{scope.row[scope.column.property]}</span>
72 }
73 }
74 }
75 },
76 watch: {
77 column: {
78 handler () {
79 this.setColumn()
80 },
81 immediate: true
82 }
83 }
84 }
85 </script>
1 /*
2 * FileName: lb-table.vue
3 * Remark: element table
4 * Project: lb-element-table
5 * Author: 任超
6 * File Created: Tuesday, 19th March 2019 9:55:27 am
7 * Last Modified: Tuesday, 19th March 2019 9:55:34 am
8 * Modified By: 任超
9 */
10
11 <template>
12 <div :class="['lb-table', customClass]">
13 <el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable" :border='border'
14 :row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection" v-bind="$attrs"
15 :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
16 :span-method="this.merge ? this.mergeMethod : this.spanMethod">
17 <el-table-column width="45" align="center" v-if="isRadio">
18 <template slot-scope="scope">
19 <el-radio v-model="selected" :label="scope.$index"></el-radio>
20 </template>
21 </el-table-column>
22
23 <el-table-column :label="downTitle" align="center">
24 <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
25 </lb-column>
26 </el-table-column>
27 </el-table>
28 <br>
29 <el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
30 layout="total, prev, pager, next" @current-change="paginationCurrentChange"
31 :style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
32 </el-pagination>
33 </div>
34 </template>
35
36 <script>
37 import LbColumn from './LbColumn'
38 export default {
39 props: {
40 column: Array,
41 data: Array,
42 spanMethod: Function,
43 pagination: {
44 type: Boolean,
45 default: true,
46 },
47 downExcel: {
48 type: Boolean,
49 default: false,
50 },
51 downTitle: {
52 type: String,
53 default: '标题'
54 },
55 isRadio: {
56 type: Boolean,
57 default: false,
58 },
59 border: {
60 type: Boolean,
61 default: false,
62 },
63 showHeader: {
64 type: Boolean,
65 default: true,
66 },
67 paginationTop: {
68 type: String,
69 default: '0',
70 },
71 heightNum: {
72 type: Number,
73 default: 355,
74 },
75 maxHeight: {
76 type: Number,
77 default: 500
78 },
79 heightNumSetting: {
80 type: Boolean,
81 default: false,
82 },
83 customClass: {
84 type: String,
85 default: '',
86 },
87 paginationAlign: {
88 type: String,
89 default: 'left',
90 },
91 merge: Array,
92 },
93 components: {
94 LbColumn,
95 },
96 data () {
97 return {
98 tableHeight: 'auto',
99 mergeLine: {},
100 mergeIndex: {},
101 selected: ''
102 }
103 },
104 created () {
105 this.getMergeArr(this.data, this.merge)
106 this.getHeight()
107 },
108 computed: {
109 dataLength () {
110 return [] || this.data.length
111 },
112 },
113 methods: {
114 // 单选
115 /**
116 * @description: 单选
117 * @param {*} row
118 * @author: renchao
119 */
120 singleElection (row) {
121 this.selected = this.data.indexOf(row);
122 },
123
124 /**
125 * @description: tableRowClassName
126 * @param {*} row
127 * @param {*} rowIndex
128 * @author: renchao
129 */
130 tableRowClassName ({ row, rowIndex }) {
131 if (rowIndex % 2 === 1) {
132 return 'interlaced';
133 }
134 },
135 /**
136 * @description: getHeight
137 * @author: renchao
138 */
139 getHeight () {
140 if (!this.heightNumSetting) {
141 let _this = this
142 if (this.heightNum) {
143 _this.$nextTick(() => {
144
145 window.addEventListener('resize', () => {
146 _this.tableHeight = _this.calcHeightx(230)
147 });
148 _this.tableHeight = _this.calcHeightx(230)
149 })
150 } else {
151 _this.tableHeight = window.innerHeight - _this.heightNum
152 }
153 }
154 },
155 /**
156 * @description: calcHeightx
157 * @param {*} value
158 * @param {*} wappered
159 * @author: renchao
160 */
161 calcHeightx (value, wappered = true) {
162 //项目自定义的公共header部分的高度，可忽略
163 let header = document.querySelector(".from-clues-header").offsetHeight;
164 //value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
165 value = value == undefined ? 100 : value;
166 let res = window.innerHeight - parseInt(header) - value;
167 if (wappered) {
168 //通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素
169 let wapper = window.document.getElementsByClassName('el-table__body-wrapper');
170 //通过原生方法，获取dom节点的高度------获取element-ui table表格header的元素
171 let header = window.document.getElementsByClassName('el-table__header-wrapper');
172 //必须加延时，要不然赋不上去值
173 setTimeout(() => {
174 //通过上边计算得到的table高度的value值，减去table表格的header高度，剩下的通过dom节点直接强行赋给table表格的body
175 wapper[0].style.height = (value - header[0].clientHeight)
176 }, 100)
177 }
178 return res;
179 },
180 /**
181 * @description: clearSelection
182 * @author: renchao
183 */
184 clearSelection () {
185 this.$refs.elTable.clearSelection()
186 },
187 /**
188 * @description: toggleRowSelection
189 * @param {*} row
190 * @param {*} selected
191 * @author: renchao
192 */
193 toggleRowSelection (row, selected) {
194 this.$refs.elTable.toggleRowSelection(row, selected)
195 },
196 /**
197 * @description: toggleAllSelection
198 * @author: renchao
199 */
200 toggleAllSelection () {
201 this.$refs.elTable.toggleAllSelection()
202 },
203 /**
204 * @description: toggleRowExpansion
205 * @param {*} row
206 * @param {*} expanded
207 * @author: renchao
208 */
209 toggleRowExpansion (row, expanded) {
210 this.$refs.elTable.toggleRowExpansion(row, expanded)
211 },
212 /**
213 * @description: setCurrentRow
214 * @param {*} row
215 * @author: renchao
216 */
217 setCurrentRow (row) {
218 this.$refs.elTable.setCurrentRow(row)
219 },
220 /**
221 * @description: clearSort
222 * @author: renchao
223 */
224 clearSort () {
225 this.$refs.elTable.clearSort()
226 },
227 /**
228 * @description: clearFilter
229 * @param {*} columnKey
230 * @author: renchao
231 */
232 clearFilter (columnKey) {
233 this.$refs.elTable.clearFilter(columnKey)
234 },
235 /**
236 * @description: doLayout
237 * @author: renchao
238 */
239 doLayout () {
240 this.$refs.elTable.doLayout()
241 },
242 /**
243 * @description: sort
244 * @param {*} prop
245 * @param {*} order
246 * @author: renchao
247 */
248 sort (prop, order) {
249 this.$refs.elTable.sort(prop, order)
250 },
251 /**
252 * @description: paginationCurrentChange
253 * @param {*} val
254 * @author: renchao
255 */
256 paginationCurrentChange (val) {
257 this.$emit('p-current-change', val)
258 },
259 /**
260 * @description: getMergeArr
261 * @param {*} tableData
262 * @param {*} merge
263 * @author: renchao
264 */
265 getMergeArr (tableData, merge) {
266 if (!merge) return
267 this.mergeLine = {}
268 this.mergeIndex = {}
269 merge.forEach((item, k) => {
270 tableData.forEach((data, i) => {
271 if (i === 0) {
272 this.mergeIndex[item] = this.mergeIndex[item] || []
273 this.mergeIndex[item].push(1)
274 this.mergeLine[item] = 0
275 } else {
276 if (data[item] === tableData[i - 1][item]) {
277 this.mergeIndex[item][this.mergeLine[item]] += 1
278 this.mergeIndex[item].push(0)
279 } else {
280 this.mergeIndex[item].push(1)
281 this.mergeLine[item] = i
282 }
283 }
284 })
285 })
286 },
287 /**
288 * @description: mergeMethod
289 * @param {*} row
290 * @param {*} column
291 * @param {*} rowIndex
292 * @param {*} columnIndex
293 * @author: renchao
294 */
295 mergeMethod ({ row, column, rowIndex, columnIndex }) {
296 const index = this.merge.indexOf(column.property)
297 if (index > -1) {
298 const _row = this.mergeIndex[this.merge[index]][rowIndex]
299 const _col = _row > 0 ? 1 : 0
300 return {
301 rowspan: _row,
302 colspan: _col,
303 }
304 }
305 },
306 },
307 watch: {
308 merge () {
309 this.getMergeArr(this.data, this.merge)
310 },
311 dataLength () {
312 this.getMergeArr(this.data, this.merge)
313 }
314 },
315 }
316 </script>
317 <style rel="stylesheet/scss" scoped lang="scss">
318 .lb-table {
319 margin-top: 1px;
320
321 .interlaced {
322 background: #fafcff;
323 border: 1px solid #ebf2fa;
324 }
325 }
326
327 /deep/.el-table .cell {
328 padding-left: 3px;
329 padding-right: 3px;
330 }
331
332 /deep/.el-radio__label {
333 display: none;
334 }
335 </style>