需求：
1.左侧变更前表格数据不可以编辑，并且背景色加灰
2.右侧变更后表格数据可被编辑，编辑后变更前与变更后行数据不一致，添加背景色区分
3.点击删除的时候，给变更后表格当前行，添加背景色和删除的中横线
<el-table
ref="table"
:data="tableDataList"
style="width: 100%; margin: 0 auto; font-size: 14px;"
height="100%"
align="center"
row-key="node_code"
:row-class-name="tableRowClassName"
:cell-class-name="tableCellClassName"
@cell-click="handleCellClick"
>
<el-table-column align="center" label="操作" min-width="90" fixed="right">
<template slot-scope="scope">
<div>
<a class="mc" title="删除" @click="handleDel(scope.row)"><em slot="reference" class="el-icon-delete mc" style="cursor: pointer" /></a>
</div>
</template>
</el-table-column>
<el-table-column label="变更前">
<el-table-column v-for="(item, index) in viewColumns" :key="index" :fixed="item.fixed" :prop="item.prop" :align="item.align" :label="item.label" :min-width="item.width" :show-overflow-tooltip="true">
<template slot-scope="scope">
<!-- <el-input v-if="scope.row.index == rowIndex && scope.column.index == columnIndex" v-model="scope.row[item.prop]" class="item__input" placeholder="请输入" @blur="handleBlur" /> -->
<div class="item__txt">{{ scope.row[item.prop] }}</div>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="变更后" class="after_class">
<!-- 变更前的数据是不可修改的,变更后的数据是可以被修改的 -->
<el-table-column v-for="(item, index) in viewColumnsTwo" :key="index" :fixed="item.fixed" :prop="item.prop" :align="item.align" :label="item.label" :min-width="item.width" :show-overflow-tooltip="true" class="after_class">
<template slot-scope="scope" class="after_class">
<el-input v-if="scope.row.index == rowIndex && scope.column.index == columnIndex" v-model="scope.row[item.prop]" class="item__input" placeholder="请输入" @blur="handleBlur" />
<div v-else class="item__txt after_class">{{ scope.row[item.prop] }}</div>
</template>
</el-table-column>
</el-table-column>
</el-table>数据值：
<script>
data() {
return {
tableDataList:[],
//isEdit单元格控制是否可编辑
viewColumns: [
{ prop: 'topSymptomBefore', width: '120', align: 'center', label: '事项', fixed: false, isEdit: false },
{ prop: 'controlItemBefore', width: '120', align: 'center', label: '管理项', fixed: false, isEdit: false },
{ prop: 'controlStandardBefore', width: '120', align: 'center', label: '管理基准', fixed: false, isEdit: false },
{ prop: 'remarkBefore', width: '120', align: 'center', label: '备注', fixed: false, isEdit: false}
],
// idAfter是当前数据的id,新增的时候 这个数据是
viewColumnsTwo: [
{ prop: 'topSymptomAfter', width: '120', align: 'center', label: '事项', fixed: false, isEdit: true },
{ prop: 'controlItemAfter', width: '120', align: 'center', label: '管理项', fixed: false, isEdit: true },
{ prop: 'controlStandardAfter', width: '120', align: 'center', label: '管理基准', fixed: false, isEdit: true },
{ prop: 'remarkAfter', width: '120', align: 'center', label: '备注', fixed: false, isEdit: true }
],
}
}
</script>添加背景色处理:
tableCellClassName({ row, column, columnIndex }) {
// 把每一列的索引放到column里
column.index = columnIndex
if (row.colorFlag) {
if ((column.property == 'topSymptomAfter' || column.property == 'controlItemAfter' || column.property == 'controlStandardAfter' || column.property == 'remarkAfter')) {
return 'warning-row' // 返回被点击行的样式
}
}
if (column.property == 'topSymptomBefore' || column.property == 'controlItemBefore' || column.property == 'controlStandardBefore' || column.property == 'remarkBefore') {
return 'success-row' // 返回被点击行的样式
}
// 对比后的数据 不等于 对比前的数据,那么添加背景色
if (column.property == 'topSymptomAfter' && (row.topSymptomAfter.toString() !== row.topSymptomBefore.toString())) {
return 'fill-row'
}
if (column.property == 'controlItemAfter' && (row.controlItemAfter.toString() !== row.controlItemBefore.toString())) {
return 'fill-row'
}
if (column.property == 'controlStandardAfter' && (row.controlStandardAfter.toString() !== row.controlStandardBefore.toString())) {
return 'fill-row'
}
if (column.property == 'remarkAfter' && (row.remarkAfter.toString() !== row.remarkBefore.toString())) {
return 'fill-row'
}
return '' // 返回其他行的默认样式
},
//删除行
handleDel(row) {
this.handleIdentification(row)
// this.tableDataList = this.tableDataList.filter(item => item.index !== row.index)
if (!(row.topSymptomBefore && row.controlItemBefore && row.controlStandardBefore && row.remarkBefore)) {
row.colorFlag = false
// 如果左侧没有数据值，只有右侧有数据值，点击删除 是删除整条数据
this.tableDataList = this.tableDataList.filter(item => item.index !== row.index)
}
if ((row.topSymptomAfter || row.controlItemAfter || row.controlStandardAfter || row.remarkAfter)) {
row.colorFlag = true
updateMqs(this.addForm).then(res => {
this.$message.success(res.msg)
}).catch(res => {
this.$message.error(res.msg)
})
}
},<style lang="scss" scoped>
::v-deep .el-table .warning-row{
text-decoration: line-through;
background-color: #f0f9eb;
color: red
}
::v-deep .el-table .success-row {
background-color: #F0F0F0;
}
::v-deep .el-table .fill-row{
background-color: #F5F108;
}
</style>成果：
