element el-card禁用

Question

element el-card禁用，当isSelect为false时，加一个遮罩层，让el-card不可选中

<el-card class="commodity-card" :body-style="{ padding: '15px' }" v-for="goods in applyGoodsList" :key="goods.id">
                        <el-checkbox :label="goods.id" @change="changeSelct(goods.id, $event)">
                            <div class="commodity-img-box">
                                <img class="commodity-img" :src="fileUrl + goods.image" />
                                <a v-if="goods.isSetStandard == 1" class="specification">多规格</a>
                                </div>
                            <div class="right-commodity-info">
                                <div class="commodity-title">{{ goods.name }}</div>
                                <div class="commodity-desc">{{ goods.description }}</div>
                                <div class="mop-data">{{ goods.sellingPrice }}起</div>
                            </div>
                            <!-- <div class="del-commodity-btn"> -->
                            <!-- <el-checkbox :value="goods.id"></el-checkbox> -->
                            <!-- </div> -->
                        </el-checkbox>
                    </el-card>

Answer 1

在el-card里面加一个div(自己写样式，层级高一点)，因为本身el-card 就没有disabled这个属性

<el-card class="commodity-card" :body-style="{ padding: '15px' }" v-for="goods in applyGoodsList" :key="goods.id">
                    <div v-if="!isSelect"></div>
                        <el-checkbox :label="goods.id" @change="changeSelct(goods.id, $event)">
                            <div class="commodity-img-box">
                                <img class="commodity-img" :src="fileUrl + goods.image" />
                                <a v-if="goods.isSetStandard == 1" class="specification">多规格</a>
                                </div>
                            <div class="right-commodity-info">
                                <div class="commodity-title">{{ goods.name }}</div>
                                <div class="commodity-desc">{{ goods.description }}</div>
                                <div class="mop-data">{{ goods.sellingPrice }}起</div>
                            </div>
                            <!-- <div class="del-commodity-btn"> -->
                            <!-- <el-checkbox :value="goods.id"></el-checkbox> -->
                            <!-- </div> -->
                        </el-checkbox>
                    </el-card>