element-ui表格选中行高亮的效果

 子页面操作对父页面有影响时,操作完子页面,父页面定位到选中行的状态

效果图:

element-ui表格选中行高亮的效果_第1张图片

使用到了官方的方法:

在子页面点击“保存”或者“确定”按钮之后刷新父页面,传递参数:

this.$parent.getList(true);

在父页面方法中添加函数:

stCurrentRow(row) {
				this.$nextTick(function() {
					this.$refs.monthlyPlanTable.setCurrentRow(row);
				})
			},

element-ui表格选中行高亮的效果_第2张图片

在接后端数据时比如说获取列表信息的时候:

//获取班次列表
			getList(kd) {
				this.loading = true;
				listClazz(this.queryParams).then(response => {
					_.each(response.data.list, function(item, key) {
						item.index = parseInt(key);
						item.startTime = item.startTime + "--" + item.endTime;
						_.mapObject(item, function(value, index) {
							if (value === '' || value === null || value === undefined) {
								item[index] = '暂无数据';
							}
						});
					});
					if (response.data.list != undefined && response.data.list.length > 0) {
						this.frequencylist = response.data.list;
						this.total = response.data.total;
						if (kd != true) {
							this.stCurrentRow(this.frequencylist[0]);
							this.selectId = response.data.list[0].id;
						} else {
							this.stCurrentRow(this.frequencylist[this.indexId]);
						}
					} else {
						this.$message({
							type: 'warning',
							message: '没有搜到相应数据!'
						});
						this.frequencylist = [];
						this.total = 0;
						return
					}
					this.loading = false
				});
			},

element-ui表格选中行高亮的效果_第3张图片

 showAllInfo是el-table的@row-click事件的方法名。

showAllInfo(row, event, column) {
				this.selectId = row.id;
				// console.log("selectId", this.selectId)
				this.indexId = row.index;
			},

 

你可能感兴趣的:(elemen-ui,Vue)