element el-card禁用

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>

在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>


直接为该组件添加属性:disabled="!isSelect"即可