【vue】实现表格中特定（报错）单元格高亮

需求：实现表格中特定（报错）单元格高亮，此处实现为空的单元格高亮

【官方】el-element

table组件中使用highlight-current-row属性，只能实现某行高亮，满足不了需求

【优解】使用ref获取对应的dom元素,并对该元素添加样式

先把表弄出来，字段绑定对应的值，并绑定ref，用来定位dom元素
这里用了官方的:highlight-current-row="isHighLight"属性，实现选中行高亮

<template>
    <div class="card-box">
        <div class="card-layout">
            <el-table :data="testData" size='mini' border style="width: 100%; margin-top: 10px;" ref="testData" :highlight-current-row="isHighLight" @current-change="isHighLight = false">
                <el-table-column type="index" label="序号" width="50" align='center'>
                    <template slot-scope="scope">
                        <span>{{scope.$index + ( pageNo1 - 1 ) * 10 + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="testCode" label="代码" align='center' show-overflow-tooltip></el-table-column>
                <el-table-column prop="testName" label="名称" align='center' show-overflow-tooltip></el-table-column>
                <el-table-column prop="applyFlag" label="权限1" align='center' show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-select size='mini' v-model="scope.row.applyFlag" filterable clearable placeholder="请选择" :ref="`applyFlag${scope.$index}`">
                                <el-option v-for="(item, index) in applyFlag"
                                :key="index" :label="item.code+'-'+item.codeName" :value="item.code"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="applyFlag2" label="权限2" align='center' show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-select size='mini' v-model="scope.row.applyFlag2" filterable clearable placeholder="请选择" :ref="`applyFlag2${scope.$index}`">
                                <el-option v-for="(item, index) in applyFlag2"
                                :key="index" :label="item.code+'-'+item.codeName" :value="item.code"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="applyFlag3" label="权限3" align='center' show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-select size='mini' v-model="scope.row.applyFlag3" filterable clearable placeholder="请选择" :ref="`applyFlag3${scope.$index}`">
                                <el-option v-for="(item, index) in applyFlag3"
                                :key="index" :label="item.code+'-'+item.codeName" :value="item.code"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
            </el-table>
            <el-row class="row_layout text-right mar-top10">
                <el-button type="primary" size="mini" plain @click="saveConfig">保存</el-button>
            </el-row>
        </div>
    </div>
</template>

接下来。。表演真正的技术了：

<script>
export default {
    // props: [ 'active', 'length' ],
    data() {
        return {
            isHighLight: true, // 选中一行进行高亮显示
            clearable: '',
            pageNo1: 1,
            total1: 0,
            testData: [
                {
                    testCode: '12',
                    testName: '测试',
                    applyFlag: '0',
                    applyFlag2: '0',
                    applyFlag3: '121'
                },
                {
                    testCode: '12',
                    testName: '测试',
                    applyFlag: '0',
                    applyFlag2: '0',
                    applyFlag3: '121'
                }
            ],
            applyFlag: [
                {
                    code: '0',
                    codeName: '无'
                },
                {
                    code: '1',
                    codeName: '有'
                }
            ],
            applyFlag2: [
                {
                    code: '0',
                    codeName: '无'
                },
                {
                    code: '1',
                    codeName: '有'
                }
            ],
            applyFlag3: []
        };
    },
    methods: {
        saveConfig() { // 保存
            console.log('保存');
            for (let i = 0; i < this.testData.length; i ++) {
                let item = this.testData[i];
                let index = i + 1;
                if (item.applyFlag === '') {
                    this.$message.error(`第${index}行的权限1不能为空`); // 报错信息 对应下方效果图1
                    this.$refs[`applyFlag${i}`].focus(); // 聚焦对应dom元素 对应下方效果图2
                    this.$refs[`applyFlag${i}`].$el.style.background = 'rgb(221, 40, 40)'; // 给定位的dom元素添加背景颜色 对应下方效果图3
                    return false;
                }
                if (item.applyFlag2 === '') {
                    this.$message.error(`第${index}行的权限2不能为空`);
                    this.$refs[`applyFlag2${i}`].focus();
                    this.$refs[`applyFlag2${i}`].$el.style.background = 'rgb(221, 40, 40)';
                    return false;
                }
                if (item.applyFlag3 === '') {
                    this.$message.error(`第${index}行的权限3不能为空`);
                    this.$refs[`applyFlag3${i}`].focus();
                    this.$refs[`applyFlag3${i}`].$el.style.background = 'rgb(221, 40, 40)';
                    return false;
                }
                if (! /^[0-9]*$/.test(item.applyFlag3)) {
                    this.$message.error('权限3不是有效数字');
                    this.$refs[`applyFlag3${i}`].$el.style.background = 'rgb(221, 40, 40)';
                    return false;
                }
            }
        }
    }
};

点击保存之后的效果图：
注：此处input的样式：border-radius设置为 25px;效果更明显一点

虽然实现了对应报错元素高亮，但是跟我自己想要的还是有出入，尝试找$refs的父元素 $parent，结果作用到了整行，根据输入框的元素没找到单元格，还是道行不够啊，希望哪位大佬可以解惑