el-table刷新后保持高亮并改变状态字段
一、需求：
1、点击左侧右边显示具体内容
2、点击右边确认 左侧依旧高亮并且改变启动状态颜色
3、点击刷新、重置、高级搜索等不高亮 右边也不显示具体内容
二、效果图：
三、具体实施
1、定义highlight-current-row 是否高亮行
<el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
2、初始化数据
data() {return {currentRow: null}
}
3、高亮显示方法 重点是setCurrentRow
// 高亮显示
highLightRow() {// currentRow 刷新前被点击行数据if (this.currentRow === null) returnfor (const item of this.crud.data) {if (item.subId === this.currentRow.subId) {this.$refs.table.setCurrentRow(item)}}}
4、将higLightRow放在自己所需要调用的地方
父组件
<projectMember ref="projectMember" :project-sub-list="crud.data" :proj-id="projId" :sub-no="subNo" :getdetail="getdetail" />
mounted() {this.highLightRow()
}
// 选中子项后，设置子项分配
handleCurrentChange(row) {this.highLightRow()
}
详情接口 以便左侧高亮改变状态字段
/* 取得项目状态*/
getdetail(id) {const params = {id: id}detail(params).then(data => {if (data) {this.crud.data.forEach(function(item) {if (item.subId === id) {item.updateStatus = data.updateStatusitem.startStatus = data.startStatusitem.linkStatus = data.linkStatus}})}})
},
子组件
props: {getdetail: {type: Function,default: null}
}
点击确定时调用
/* 确认提交*/
submitCrudForm() {this.$refs['form'].validate(valid => {if (valid) {if (!disUer) {add(this.form.projectMembers).then(res => {this.$notify({title: '保存成功',type: 'success',duration: 2500})this.hanleProjectMember(this.subId)this.getdetail(this.subId)this.$refs['sure'].doClose()}).catch(err => {console.log(err.response.data.message)})return true} else {return false}}})
}