全选-复选框/单选
2023-03-20 15:01:47 时间
背景
在一些后台管理系统中,对于全选/复选框是一个很常见的需求
虽然有现成的组件,但依旧需要对数据进行处理
实例代码
<template>
<div class="el-checkbox-wrap">
<div class="select-all">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="formParams.checkAll"
@change="handleCheckAllChange"
>全选
</el-checkbox>
</div>
<div>
<el-checkbox-group
v-model="formParams.checkeddotNames"
@change="handleCheckeddotNamesChange"
>
<el-checkbox
v-for="item in checkOptionsData"
:label="item.code"
:key="item.code"
>
{{ item.name }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</template>
<script>
export default {
name: "checkbox",
data() {
return {
formParams: {
isIndeterminate: false, // 设置 indeterminate 状态,只负责样式控制
checkAll: true, // 默认全选,true表示全选,false,不全选
checkeddotNames: [], // 绑定默认选中
code: "", // 向后端传的code字符串
},
dot_info: [
{
code: '1',
name: "画报点击"
},
{
code: '2',
name: "画报展现"
},
{
code: '3',
name: "设置壁纸"
},
{
code: '4',
name: "设置H5"
},
{
code: '5',
name: "视频播放"
}
]
}
},
computed: {
checkOptionsData() {
return this.dot_info;
},
},
mounted() {
this.formParams.checkeddotNames = this.dot_info.map(item => item.code)
},
methods: {
// 全选
handleCheckAllChange() {
//console.log("全选", val); // val就是v-model绑定的值,即this.formParams.checkAll
if (this.formParams.checkAll) {
// 当全选被选中的时候,循环遍历源数据,把数据的每一项加入到默认选中的数组中区
this.formParams.checkeddotNames = this.dot_info.map((item) => item.code);
} else {
this.formParams.checkeddotNames = [];
this.formParams.code = "";
}
this.isIndeterminate = false;
},
// 全选后面的单选
handleCheckeddotNamesChange(value) {
// value就是v-model绑定的值,即this.formParams.checkeddotNames
console.log(value);
if (this.formParams.checkeddotNames.length == this.dot_info.length) {
this.formParams.checkAll = true;
} else {
this.formParams.checkAll = false;
}
this.formParams.code = this.formParams.checkeddotNames.join(","); // 需要拼接成字符欻,用逗号,具体以什么样的格式,可与后端协商
},
}
}
</script>
<style lang="scss" scoped>
.select-all {
margin-right: 20px;
}
.el-checkbox-wrap {
display: flex;
align-content: center;
margin: 20px 0 20px 0;
}
</style>
温馨提示
效果是其次的,需要注意的是,向后端传递具体的数据,最后把需要的字段,数据传递给后端就可以了的
拓展
有些图片上右上角有单选项框,背景是图片,类似这种的也是类似处理
相关文章
- 从本体论开始说起——运营商关系图谱的构建及应用
- 如何成为一名数据科学家?
- 从未见过的堂兄杀了人,你的DNA是关键证据
- 20个安全可靠的免费数据源,各领域数据任你挑
- 20个安全可靠的免费数据源,各领域数据任你挑
- 阿里云李飞飞:All in Cloud时代,云原生数据库优势明显
- 基于Hadoop生态系统的一高性能数据存储格式CarbonData(性能篇)
- 大数据告诉你:10年漫威,到底有多少角色
- TigerGraph:实时图数据库助力金融风控升级
- Splunk利用Splunk Connected Experiences和Splunk Business Flow 扩大数据访问
- 大数据开发常见的9种数据分析手段
- 以免在景区看人,我爬了5W条全国景点门票数据...
- 【实战解析】基于HBase的大数据存储在京东的应用场景
- 数据科学家告诉你哪些计算机科学书籍是你应该看的
- Kafka作为大数据的核心技术,你了解多少?
- Spring Boot 整合 Redis 实现缓存操作
- 大数据学习必须掌握的五大核心技术有哪些?
- 基于Antlr在Apache Flink中实现监控规则DSL化的探索实践
- 甲骨文再次被Gartner评为分析型数据管理解决方案魔力象限领导者
- 爬取吴亦凡微博102118条转发数据,扒一扒流量的真假