Ant Design中a-card实现title实现勾选框效果和head自定义样式
可以在title中添加一个checkbox,然后通过v-model绑定一个变量来控制勾选框的状态。具体实现方式如下:
<div class="j-asset-right-card">
<a-row :gutter="16">
<a-col :span="12" style="border: 0;margin-bottom: 15px">
<a-card>
<template #title>
<div><a-checkbox>标题</a-checkbox> </div>
</template>
<p> 内容 </p>
</a-card>
</a-col>
<a-row :gutter="16">
</div>
<style lang="less" scoped>
.j-asset-right-card {
height:630px;
overflow: auto;
border: none;
//修改head
/deep/ .ant-card-head {
margin-bottom: -1px;
padding: 0 24px;
color: rgba(0, 0, 0, 0.85);
font-weight: bold;
font-size: 12px;
//自己设置想要的背景色
background-color: color(~`colorPalette("@{primary-color}", 1)`);
border-bottom: 1px solid #e8e8e8;
border-radius: 2px 2px 0 0;
zoom: 1;
}
}
</style>
效果如图: