单选复选
<div style="psdding:0px 0px 0px 0px;margin:0px 0px 0px 0px;border-bottom:1px solid #ccc;padding-bottom: 12px;position: relative;">
<div v-bind:class="{isShow: isListShow}">
<div class="radioCheckboxBtn">
<el-row>
<el-col :span="3">
<span class="screenName">筛选条件1：</span>
</el-col>
<el-col :span="21">
<div class="screenList">
<el-checkbox-group v-model="checkList1" @change="checkedGroup">
<el-checkbox :label="item.val" v-for="item in listData.list1" :disabled="item.disabled">{{item.label}}</el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
</div>
<div class="radioCheckboxBtn">
<el-row>
<el-col :span="3">
<span class="screenName">筛选条件标题：</span>
</el-col>
<el-col :span="21">
<div class="screenList">
<el-radio-group v-model="radio2" @change="radioGroup">
<el-radio :label="item.val" v-for="item in listData.list2" :disabled="item.disabled">{{item.label}}</el-radio>
</el-radio-group>
</div>
</el-col>
</el-row>
</div>
<div class="radioCheckboxBtn">
<el-row>
<el-col :span="3">
<span class="screenName">筛选条件2：</span>
</el-col>
<el-col :span="21">
<div class="screenList">
<el-checkbox-group v-model="checkList2">
<el-checkbox :label="item.val" v-for="item in listData.list3" :disabled="item.disabled">{{item.label}}</el-checkbox>
</el-checkbox-group>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="showBtnBox" v-if="isBtnShow">
<el-button size="mini" round class="showBtn" @click="showBtnFun">{{btnSize}}</el-button>
</div>
</div>
export default {
data() {
return {
listData: {
list1: [
{
val: 0,
label: '复选框A',
disabled: false
},
{
val: 1,
label: '复选框B',
disabled: false
},
{
val: 2,
label: '复选框C',
disabled: false
},
{
val: 3,
label: '禁用',
disabled: true
},
{
val: 4,
label: '选中且禁用',
disabled: true
}
],
list2: [
{
val: 0,
label: '备选项A',
disabled: false
},
{
val: 1,
label: '备选项B',
disabled: false
},
{
val: 2,
label: '备选项C',
disabled: false
}
],
list3: [
{
val: 0,
label: '复选框1',
disabled: false
},
{
val: 1,
label: '复选框2',
disabled: false
},
{
val: 2,
label: '复选框3',
disabled: false
},
{
val: 3,
label: '复选框4',
disabled: false
},
{
val: 4,
label: '复选框5',
disabled: false
},
{
val: 5,
label: '复选框6',
disabled: false
},
{
val: 6,
label: '复选框7',
disabled: false
},
{
val: 7,
label: '复选框8',
disabled: false
},
{
val: 8,
label: '复选框9',
disabled: false
},
{
val: 9,
label: '复选框10',
disabled: false
}
],
list4: [
{
val: 0,
label: '复选框1',
disabled: false
},
{
val: 1,
label: '复选框2',
disabled: false
},
{
val: 2,
label: '复选框3',
disabled: false
},
{
val: 3,
label: '复选框4',
disabled: false
},
{
val: 4,
label: '复选框5',
disabled: false
},
{
val: 5,
label: '复选框6',
disabled: false
},
{
val: 6,
label: '复选框7',
disabled: false
},
{
val: 7,
label: '复选框8',
disabled: false
},
{
val: 8,
label: '复选框9',
disabled: false
},
{
val: 9,
label: '复选框10',
disabled: false
}
]
},
isListShow: false,
isBtnShow: false,
btnSize: '展开更多',
checkList1: [0, 4],
checkList2: [3],
radio2: 1
}
},
components: {
BaseCard
},
created() {
this.moreFun()
},
mounted() {
},
methods: {
moreFun() {
if (Object.keys(this.listData).length > 3) {
this.isListShow = true
this.isBtnShow = true
} else {
this.isListShow = false
this.isBtnShow = false
}
},
showBtnFun() {
this.isListShow = !this.isListShow
console.log(this.isListShow)
if (this.isListShow) {
this.btnSize = '展开更多'
} else {
this.btnSize = '收起列表'
}
},
checkedGroup(val) {
console.log(val)
},
radioGroup(val) {
console.log(val)
}
}
}
<style scoped>
.screenName{
display: inline-block;
font-size: 14px;
color: #333333;
margin-top: 8px;
}
.screenList{
}
.radioCheckboxBtn{
padding: 12px 0;
border-top: 1px dashed #ccc;
}
.radioCheckboxBtn:first-child{
margin-top: 0;
border-top: 0;
}
.el-checkbox{
width: 130px;
margin-left: 0 !important;
margin-top: 8px;
}
.el-radio{
width: 130px;
margin-left: 0 !important;
margin-top: 8px;
}
.isShow{
overflow: hidden;
height: 169px !important;
}
.showBtnBox{
position: absolute;
width: 100%;
text-align: center;
bottom: -15px;
}
.showBtn{
}
</style>