Skip to content

Commit b8b917e

Browse files
author
gongjs
authored
table组合案例 (#131)
1 parent faa4f22 commit b8b917e

2 files changed

Lines changed: 54 additions & 52 deletions

File tree

‎src/plugins/LinCmsUi/models/movie.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ class Movie {
2626
rank: index + 1 + start,
2727
sorting: 50,
2828
recommend: 0,
29+
remark: '这是一部不错的电影',
30+
editFlag: false,
2931
thumb: element.thumb ? element.thumb : 'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/270-400.png',
3032
})
3133
})
@@ -60,6 +62,8 @@ class Movie {
6062
rank: index + 1,
6163
sorting: 50,
6264
recommend: 0,
65+
remark: '这是一部不错的电影',
66+
editFlag: false,
6367
thumb: element.thumb ? element.thumb : 'https://consumerminiaclprd01.blob.core.chinacloudapi.cn/miniappbackground/sfgmember/lin/270-400.png',
6468
})
6569
}

‎src/plugins/LinCmsUi/views/table/TableCombo.vue‎

Lines changed: 50 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,29 @@
11
<template>
22
<!-- 列表页面 -->
33
<div class="tableSample">
4-
<sticky-top>
54
<div class="header">
65
<div class="header-left">
76
<p class="title">豆瓣电影TOP250</p>
87
</div>
98
<div class="header-right">
10-
<lin-search @query="onQueryChange" placeholder="请输入电影名" />
9+
<lin-search @query="onQueryChange" placeholder="请输入电影名"/>
1110
<div style="margin-left:30px">
1211
<el-button type="primary" @click="dialogTableVisible=!dialogTableVisible">列操作</el-button>
13-
</div>
12+
</div>
1413
</div>
1514
</div>
1615
<lin-1px></lin-1px>
17-
</sticky-top>
1816
<div class="table-main">
1917
<el-dialog top="5vh" width="60%" :visible.sync="dialogTableVisible">
2018
<!-- 定制列 -->
2119
<span>选择要展示的列:</span>
2220
<el-checkbox-group v-model="checkList" @change="handleChange" class="m-20">
2321
<el-checkbox
24-
:disabled="item === '电影名'"
22+
:disabled="item === '电影名' || item === '排名'"
2523
:label="item"
2624
v-for="item in tempCheckList"
27-
:key="item" />
25+
:key="item"
26+
/>
2827
</el-checkbox-group>
2928
<!-- 固定列 -->
3029
<span>选择固定在左侧的列:</span>
@@ -33,24 +32,26 @@
3332
:disabled="fixedRightList.indexOf(item) > -1 || checkList.indexOf(item) === -1"
3433
:label="item"
3534
v-for="item in tempCheckList"
36-
:key="item" />
35+
:key="item"
36+
/>
3737
</el-checkbox-group>
3838
<span>选择固定在右侧的列:</span>
3939
<el-checkbox-group v-model="fixedRightList" class="m-20">
4040
<el-checkbox
4141
:disabled="fixedLeftList.indexOf(item) > -1 || checkList.indexOf(item) === -1"
4242
:label="item"
4343
v-for="item in tempCheckList"
44-
:key="item" />
44+
:key="item"
45+
/>
4546
</el-checkbox-group>
4647
</el-dialog>
4748
<el-table
48-
:row-class-name="rowClassName"
4949
:data="tableData"
5050
@row-dblclick="rowClick"
5151
@expand-change="expandChange"
5252
v-loading="loading"
53-
id="out-table'">
53+
id="out-table'"
54+
>
5455
<!-- 展示摘要 -->
5556
<el-table-column type="expand">
5657
<template slot-scope="props">
@@ -79,7 +80,8 @@
7980
type="number"
8081
class="sort-input"
8182
v-model="props.row.sorting"
82-
@blur="handleSort(props.row.sorting, props.row)">
83+
@blur="handleSort(props.row.sorting, props.row)"
84+
>
8385
</template>
8486
</el-table-column>
8587
<!-- 正常表单列 -->
@@ -90,7 +92,8 @@
9092
:label="item.label"
9193
:show-overflow-tooltip="true"
9294
:fixed="item.fixed ? item.fixed : false"
93-
:width="item.width ? item.width : ''"></el-table-column>
95+
:width="item.width ? item.width : ''"
96+
></el-table-column>
9497
<!-- 排序 评分 -->
9598
<el-table-column
9699
label="评分"
@@ -99,17 +102,20 @@
99102
v-bind:key="item.label"
100103
:fixed="item.fixed ? item.fixed : false"
101104
:width="item.width ? item.width : ''"
102-
v-if="item.label === '评分'"></el-table-column>
105+
v-if="item.label === '评分'"
106+
></el-table-column>
103107
<!-- 单元格编辑 -->
104108
<el-table-column
105109
v-bind:key="item.label"
106110
label="备注"
111+
prop="remark"
107112
:width="item.width"
108-
:show-overflow-tooltip="showTooltip"
109-
v-if="item.label === '备注'">
113+
show-overflow-tooltip
114+
v-if="item.label === '备注'"
115+
>
110116
<template slot-scope="props">
111117
<div v-if="!props.row.editFlag" class="table-edit">
112-
<div @click="handleEdit(props.row)">{{ props.row.remark }}</div>
118+
<div @click="handleEdit(props.row)" class="content">{{ props.row.remark }}</div>
113119
<div class="cell-icon" @click="handleCellEdit(props.row)">
114120
<i class="el-icon-edit"></i>
115121
</div>
@@ -130,7 +136,11 @@
130136
<!-- 推荐 -->
131137
<el-table-column label="推荐" v-if="item.label === '推荐'" v-bind:key="item.label">
132138
<template slot-scope="props">
133-
<el-switch v-model="props.row.recommend" active-color="#3963bc" @change="handleRecommend($event, props.row)"></el-switch>
139+
<el-switch
140+
v-model="props.row.recommend"
141+
active-color="#3963bc"
142+
@change="handleRecommend($event, props.row)"
143+
></el-switch>
134144
</template>
135145
</el-table-column>
136146
</template>
@@ -143,7 +153,8 @@
143153
plain
144154
size="mini"
145155
:key="index"
146-
@click.native.prevent.stop="buttonMethods(item.func, scope.$index, scope.row)">{{item.name}}</el-button>
156+
@click.native.prevent.stop="buttonMethods(item.func, scope.$index, scope.row)"
157+
>{{item.name}}</el-button>
147158
</template>
148159
</el-table-column>
149160
</el-table>
@@ -157,12 +168,12 @@
157168
:current-page="currentPage"
158169
v-if="refreshPagination"
159170
layout="prev, pager, next, jumper"
160-
:total="total_nums"></el-pagination>
171+
:total="total_nums"
172+
></el-pagination>
161173
</div>
162174
</div>
163175
<source-code></source-code>
164176
</div>
165-
166177
</template>
167178

168179
<script>
@@ -192,19 +203,6 @@ export default {
192203
dialogTableVisible: false,
193204
fixedLeftList: [],
194205
fixedRightList: [],
195-
// 拖拽相关
196-
enableDrag: false,
197-
rowClassName: '', // 行样式
198-
// 数据导出相关
199-
options: [{
200-
value: 'excel',
201-
label: '导出 Excel',
202-
},
203-
{
204-
value: 'csv',
205-
label: '导出 Csv',
206-
},
207-
],
208206
value: '',
209207
// 单元格编辑相关
210208
editRow: 0,
@@ -234,7 +232,6 @@ export default {
234232
const res = movie.getTop250(start, count)
235233
res.map((item) => {
236234
const temp = item
237-
temp.remark = '这是一部不错的电影'
238235
temp.editFlag = false
239236
return ''
240237
})
@@ -292,16 +289,13 @@ export default {
292289
// 单元格编辑
293290
handleCellEdit(row) {
294291
row.editFlag = true; // eslint-disable-line
295-
this.showTooltip = false
296-
this.$set(this.filterTableColumn[7], 'width', 330)
292+
this.$set(this.filterTableColumn[7], 'width', 200)
297293
this.tempEditRemark = row.remark
298294
this.editRow++
299295
},
300296
handleCellSave(row) {
301-
this.loading = true
297+
row.editFlag = false; // eslint-disable-line
302298
setTimeout(() => {
303-
this.loading = false
304-
row.editFlag = false; // eslint-disable-line
305299
this.editRow--
306300
this.$message({
307301
type: 'success',
@@ -311,6 +305,7 @@ export default {
311305
},
312306
handleCellCancel(row) {
313307
row.editFlag = false; // eslint-disable-line
308+
console.log(this.tempEditRemark)
314309
row.remark = this.tempEditRemark; // eslint-disable-line
315310
this.editRow--
316311
},
@@ -347,10 +342,10 @@ export default {
347342
type: 'warning',
348343
})
349344
.then(async () => {
350-
self.loading = true // eslint-disable-line
345+
self.loading = true; // eslint-disable-line
351346
setTimeout(() => {
352347
self.tableData.splice(index, 1)
353-
self.loading = false // eslint-disable-line
348+
self.loading = false; // eslint-disable-line
354349
}, 1000)
355350
})
356351
},
@@ -362,10 +357,12 @@ export default {
362357
this._getTableData(0, 20)
363358
return
364359
}
365-
// 处理带空格的情况
366-
this.tableData = movie.getDataByQuery(this.searchKeyword)
360+
this.loading = true
361+
setTimeout(() => {
362+
this.loading = false
363+
this.tableData = movie.getDataByQuery(this.searchKeyword)
364+
}, 1000)
367365
},
368-
369366
},
370367
371368
watch: {
@@ -395,8 +392,8 @@ export default {
395392
editRow() {
396393
if (this.filterTableColumn[7]) {
397394
this.editRow === 0 // eslint-disable-line
398-
? this.$set(this.filterTableColumn[7], 'width', 200) // eslint-disable-line
399-
: null // eslint-disable-line
395+
? this.$set(this.filterTableColumn[7], "width", 200) // eslint-disable-line
396+
: null; // eslint-disable-line
400397
}
401398
return ''
402399
},
@@ -458,6 +455,11 @@ export default {
458455
align-items: center;
459456
justify-content: space-between;
460457
width: 100%;
458+
.content {
459+
overflow: hidden;
460+
text-overflow: ellipsis;
461+
white-space: nowrap;
462+
}
461463
462464
.cell-icon {
463465
cursor: pointer;
@@ -526,8 +528,8 @@ export default {
526528
justify-content: flex-end;
527529
margin: 20px;
528530
}
529-
.pagination /deep/ .el-pagination__editor.el-input .el-input__inner{
530-
border-radius: 4px;
531+
.pagination /deep/ .el-pagination__editor.el-input .el-input__inner {
532+
border-radius: 4px;
531533
}
532534
}
533535
</style>
@@ -536,8 +538,4 @@ export default {
536538
display: inline-block;
537539
width: 100%;
538540
}
539-
540-
.tableSample .rowClassName {
541-
cursor: move !important;
542-
}
543541
</style>

0 commit comments

Comments
 (0)