展示网站如何做,网站编程教学,做花茶网站解说,谷歌seo推广培训班需求#xff1a;
1.左侧变更前表格数据不可以编辑#xff0c;并且背景色加灰
2.右侧变更后表格数据可被编辑#xff0c;编辑后变更前与变更后行数据不一致#xff0c;添加背景色区分
3.点击删除的时候#xff0c;给变更后表格当前行#xff0c;添加背景色和删除的中横…需求
1.左侧变更前表格数据不可以编辑并且背景色加灰
2.右侧变更后表格数据可被编辑编辑后变更前与变更后行数据不一致添加背景色区分
3.点击删除的时候给变更后表格当前行添加背景色和删除的中横线 el-tablereftable:datatableDataListstylewidth: 100%; margin: 0 auto; font-size: 14px;height100%aligncenterrow-keynode_code:row-class-nametableRowClassName:cell-class-nametableCellClassNamecell-clickhandleCellClickel-table-column aligncenter label操作 min-width90 fixedrighttemplate slot-scopescopediva classmc title删除 clickhandleDel(scope.row)em slotreference classel-icon-delete mc stylecursor: pointer //a/div/template/el-table-columnel-table-column label变更前el-table-column v-for(item, index) in viewColumns :keyindex :fixeditem.fixed :propitem.prop :alignitem.align :labelitem.label :min-widthitem.width :show-overflow-tooltiptruetemplate slot-scopescope!-- el-input v-ifscope.row.index rowIndex scope.column.index columnIndex v-modelscope.row[item.prop] classitem__input placeholder请输入 blurhandleBlur / --div classitem__txt{{ scope.row[item.prop] }}/div/template/el-table-column/el-table-columnel-table-column label变更后 classafter_class!-- 变更前的数据是不可修改的,变更后的数据是可以被修改的 --el-table-column v-for(item, index) in viewColumnsTwo :keyindex :fixeditem.fixed :propitem.prop :alignitem.align :labelitem.label :min-widthitem.width :show-overflow-tooltiptrue classafter_classtemplate slot-scopescope classafter_classel-input v-ifscope.row.index rowIndex scope.column.index columnIndex v-modelscope.row[item.prop] classitem__input placeholder请输入 blurhandleBlur /div v-else classitem__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 columnIndexif (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 trueupdateMqs(this.addForm).then(res {this.$message.success(res.msg)}).catch(res {this.$message.error(res.msg)})}},
style langscss 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 成果
