思路简述

• 需求：桌子上有一排灯，点哪个亮哪个，但是要求每次只能点亮一盏。
• 如果不使用排他思想，操作过程如下：
  • 第一次打开一盏灯，记为 A，记录下来。
  • 第二次打开灯之前，先去找记录，得知刚才打开的是 A，关掉 A。
  • 第二次打开一盏灯，记为 B，记录下来。
  • 第三次打开灯之前，先去找记录，得知刚才打开的是 B，关掉 B。
  • …
  • 上述方法需要频繁操作存储，并且产生了很多变量。
• 使用排他思想的话，操作过程如下：
  • 第一次打开一盏灯。
  • 第二次打开灯之前，不管之前打开的是谁，让所有的灯都执行关闭操作。
  • 第二次打开一盏灯。
  • 第三次打开灯之前，不管之前打开的是谁，让所有的灯都执行关闭操作。
  • …
  • 上述方法未产生新变量，也没有操作存储。

实例应用

• 低配版 radio 组合

<template>
    <div>
        <div class="redioBlock">
            <div
                class="sinRadio"
                v-for="(item, index) in redioArr"
                :key="index"
                @click="chooseOnlyOne(index)"
            >
                <div class="value" :class="item.value ? 'choosed' : ''"></div>
                <div class="label" :class="item.value ? 'choosed' : ''">
                    {{ item.label }}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            redioArr: [
                { value: false, label: "第一个值" },
                { value: false, label: "第二个值" },
                { value: false, label: "第三个值" },
                { value: false, label: "第四个值" },
            ],
        };
    },
    watch: {},
    mounted() {},
    methods: {
        chooseOnlyOne(chooseIndex) {
        	// 遍历灯的数组
            this.redioArr.forEach((item, index) => {
                // 先关掉所有的灯
                item.value = false;
                if (index == chooseIndex) {
                    // 再打开点击的灯
                    item.value = true;
                }
            });
        },
    },
};
</script>
<style lang="less" scoped>
.sinRadio {
    overflow: hidden;
    line-height: 40px;
    .value {
        width: 20px;
        height: 20px;
        float: left;
        border: 1px solid #ccc;
        border-radius: 50%;
        margin-right: 10px;
        margin-top: 10px;
        &.choosed {
            background: #87add8;
            border: 1px solid #87add8;
        }
    }
    .label {
        float: left;
        &.choosed {
            font-weight: bold;
        }
    }
}
</style>

• 低配版 radio 组合（利用了 vue 的特性，另一种实现方式，与本文思想无关）

<template>
    <div>
        <div class="redioBlock">
            <div
                class="sinRadio"
                v-for="(item, index) in redioArr"
                :key="index"
                @click="chooseOnlyOne(index)"
            >
                <div
                    class="value"
                    :class="index == activeIndex ? 'choosed' : ''"
                ></div>
                <div
                    class="label"
                    :class="index == activeIndex ? 'choosed' : ''"
                >
                    {{ item.label }}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 记录当前点击的灯
            activeIndex: null,
            redioArr: [
                { label: "第一个值" },
                { label: "第二个值" },
                { label: "第三个值" },
                { label: "第四个值" },
            ],
        };
    },
    watch: {},
    mounted() {},
    methods: {
        chooseOnlyOne(chooseIndex) {
            this.activeIndex = chooseIndex;
        },
    },
};
</script>

• 关键信息脱敏（点击星号，只展示当前脱敏信息，其他内容仍是脱敏状态）

<template>
    <div>
        <div class="tableBlock">
            <el-table
                class="myTable"
                :data="tableData"
                style="width: 100%"
                :key="num"
            >
                <el-table-column prop="name" label="姓名" width="200">
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="200">
                    <template slot-scope="scope">
                        <div @click="chooseOnlyOne(scope.$index, 'phone')">
                            {{ scope.row.phoneHidden }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="idCard" label="证件号">
                    <template slot-scope="scope">
                        <div @click="chooseOnlyOne(scope.$index, 'idCard')">
                            {{ scope.row.idCardHidden }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 记录当前点击的灯
            activeIndex: null,
            tableData: [
                {
                    name: "张三",
                    phone: "15222222222",
                    idCard: "100000000000000000",
                },
                {
                    name: "李四",
                    phone: "15222222222",
                    idCard: "100000000000000000",
                },
                {
                    name: "王五",
                    phone: "15222222222",
                    idCard: "100000000000000000",
                },
                {
                    name: "赵六",
                    phone: "15222222222",
                    idCard: "100000000000000000",
                },
            ],
            num: 0,
        };
    },
    watch: {},
    mounted() {
        // 遍历数组，将敏感信息脱敏
        this.tableData.forEach((item, index) => {
            item.phoneHidden = "***";
            item.idCardHidden = "******";
        });
    },
    methods: {
        chooseOnlyOne(chooseIndex, type) {
            // 不管上一次显示明文的是哪个单元格，先将所有的单元格信息脱敏
            this.tableData.forEach((item, index) => {
                item.phoneHidden = "***";
                item.idCardHidden = "******";
            });
            // 获取到当前点击的单元格，让当前点击的单元格显示明文
            this.tableData.forEach((item, index) => {
                if (index == chooseIndex) {
                    if (type == "phone") {
                        // 点击的是手机号，显示手机号明文
                        item.phoneHidden = item.phone;
                    } else {
                        // 点击的是身份证，显示身份证明文
                        item.idCardHidden = item.idCard;
                    }
                }
            });
            // 更新数据后，更新一下表格的节点
            this.num += 1;
        },
    },
};
</script>