javascript
复制代码
//子组件
<template>
<!-- 左侧第二个 -->
<div class="left-second-single">
<div class="layer-list-wrapper1">
<el-radio-group v-model="radio" @input="inputChange">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item v-for="(item,index) in leftSelectSingleArr" :key="index+1" :name="item.nameNumber">
<template slot="title">
<div class="left-title">
<div class="left-icon" v-if="item.textName">{{ item.textName }}</div>
<div class="left-name">{{item.name}}（{{item.numData}}个）</div>
</div>
<i class="iconfont" :class="judgeActive('1')!=-1? 'icon-bofang-copy-copy':'icon-bofang'"></i>
</template>
<el-radio v-for="(itemVal,indexVal) in item.stationArr" :key="indexVal+1" :label="itemVal.stationLabel">
{{ itemVal.stationName }}
<span class="check-handwork" v-if="itemVal.stationType==0">自动</span>
<span class="check-auto" v-if="itemVal.stationType==1">手工</span>
</el-radio>
</el-collapse-item>
</el-collapse>
</el-radio-group>
</div>
</div>
</template>
<script>
export default {
components: {},
props: {
leftSelectSingleArr: {
type: Array,
default: () => [],
},
},
data() {
return {
activeNames: [],
radio: "",
};
},
created() {
if (this.leftSelectSingleArr.length > 0) {
this.activeNames = [this.leftSelectSingleArr[0].nameNumber];
if (this.leftSelectSingleArr[0].stationArr.length > 0) {
this.radio = this.leftSelectSingleArr[0].stationArr[0].stationLabel;
}
}
this.inputChange(this.radio);
},
watch: {},
mounted() {},
methods: {
handleChange(val) {},
// 单击单选
inputChange(val) {
// 判断是手工还是自动，给父组件传值
let stationArr = this.findEqualParams(this.leftSelectSingleArr, val); //val所在的数组的父类的数组
let stationType = stationArr[0].stationArr.find(
(item) => item.stationLabel == val
).stationType; //获取到的当前点击的是手工还是自动
this.$emit("getRadioVal", val, stationType);
},
//判断是否打开
judgeActive(data) {
return this.activeNames.indexOf(data);
},
// 寻找当前点击的单选所在的数组的父类的数组
findEqualParams(array, paramToFind) {
return array.filter((obj) =>
obj.stationArr.some((item) => item.stationLabel === paramToFind)
);
},
},
};
</script>
<style lang="scss">
.left-second-single {
.layer-list-wrapper1 {
height: calc(100% - 22px);
width: 100%;
border-radius: 4px;
background-color: #fff;
// overflow: auto;
margin-top: 10px;
display: flex;
flex-direction: column;
.el-collapse {
width: 100%;
border: 0;
color: #4b4b4b;
// overflow: auto;
.el-collapse-item {
margin-bottom: 12px;
}
.el-collapse-item__header {
width: 100%;
height: 60px;
background: #f8f9ff;
border-bottom: none;
justify-content: space-between;
align-items: center;
border-radius: 4px;
padding: 0 16px;
.el-collapse-item__arrow {
display: none;
}
.left-title {
display: flex;
align-items: center;
.left-icon {
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
border-radius: 500000px;
background: #e1e6f0;
color: #303133;
font-size: 14px;
margin-right: 12px;
}
.left-name {
color: #303133;
font-weight: 700;
}
}
.iconfont {
font-size: 10px;
}
}
.el-collapse-item__header:hover {
background: #3886ff;
border-radius: 4px;
.left-title {
.left-icon {
border-radius: 4px;
background: #fff;
color: #0064ff;
}
.left-name {
color: #fff;
font-weight: 700;
}
}
.iconfont {
color: #fff;
}
}
.is-active {
background: #3886ff !important;
border-radius: 4px;
.left-title {
.left-icon {
border-radius: 4px;
background: #fff;
color: #0064ff;
}
.left-name {
color: #fff;
font-weight: 700;
}
}
.iconfont {
color: #fff;
transform: rotate(90deg);
}
}
.el-collapse-item__content {
padding: 2px 16px;
border-left: 1px solid #e1e6f0;
border-right: 1px solid #e1e6f0;
border-bottom: 1px solid #e1e6f0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
margin-bottom: 12px;
}
.el-collapse-item:last-child {
.el-collapse-item__wrap {
border: 0;
.el-collapse-item__content {
margin-bottom: 0px;
}
}
}
}
/* 设置滚动条的样式 */
.el-collapse::-webkit-scrollbar {
width: 0px;
height: 0;
}
}
}
.layer-list-wrapper1::-webkit-scrollbar {
display: none;
}
.el-collapse-item__wrap {
border: 0;
}
.el-radio {
width: 100%;
display: flex;
align-items: center;
margin: 16px 0;
.el-radio__input {
width: 14px;
height: 14px;
}
.el-radio__label {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.check-handwork {
width: 44px;
height: 24px;
line-height: 24px;
text-align: center;
display: block;
margin-left: auto;
border-radius: 4px;
background: #3886ff1a;
border: 1px solid #3886ff;
color: #3886ff;
}
.check-auto {
width: 44px;
height: 24px;
line-height: 24px;
text-align: center;
display: block;
margin-left: auto;
border-radius: 4px;
background: #70c4221a;
border: 1px solid #70c422;
color: #70c422;
}
}
}
.el-radio:hover{
.el-radio__input{
.el-radio__inner{
border-color: #3886ff;
}
}
.el-radio__label{
color: #3886ff;
}
}
</style>
javascript
复制代码
//父组件
<leftSelectSingle v-if="leftSelectSingleFlag" :leftSelectSingleArr="leftSelectSingleArr" @getRadioVal='getRadioVal'></leftSelectSingle>
import leftSelectSingle from "@/components/leftSelect/leftSelectSingle.vue";
components: {
leftSelectSingle,
},
data() {
return {
leftSelectSingleArr: [
{
name: "省控断面",
numData: "",
nameNumber: 1,
stationArr: [
{
stationName: "桥1",
stationLabel: 1,
stationType: 1, //1是手工，2是自动
},
{
stationName: "桥2",
stationLabel: 2,
stationType: 0, //1是手工，0是自动
},
],
},
{
name: "市控断面",
numData: "",
nameNumber: 2,
stationArr: [
{
stationName: "桥3",
stationLabel: 3,
stationType: 1, //1是手工，0是自动
},
{
stationName: "桥4",
stationLabel: 4,
stationType: 0, //1是手工，0是自动
},
],
},
],
leftSelectSingleFlag: true,
}
},
methods: {
getRadioVal(val, stationType) {
console.log("单选返回")
},
}
