概述
根据公司需求,要结合element-ui开发的商城地址,已复选框的形式选择
详细
1,项目结构
2,项目运行实现效果图
3,实现代码
1,html部分
<div>
<div class="city-list">
<div class="city-one" v-for="(item, index) in cityLists" :key="index">
<el-checkbox v-model="item.ischeck" :disabled="item.disable" @change="itemChange(item)">{{ item.name }}{{ item.num === 0 ? '' : `(${item.num})` }}</el-checkbox>
<div class="city-child">
<div class="city-list">
<div class="child-one" v-for="(i, j) in item.cityList" :key="j">
<el-checkbox v-model="i.ischeck" :disabled="i.disable" @change="childChange(item)">{{ i.name }}</el-checkbox>
</div>
</div>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="configAdd">确 定</el-button>
</span>
</div>
2,js部分
import ChineseDistricts from "./app.js"; //引用地址库
export default {
data() {
return {
ChineseDistricts: ChineseDistricts,
cityLists: []
};
},
watch: {
},
created() {
this.getData()
},
components: {},
computed: {},
mounted() {},
methods: {
getData() {
this.cityLists = []
this.ChineseDistricts.forEach(item => {
item.ischeck = false
item.disable = false
item.num = 0
if (item.cityList && item.cityList.length > 0) {
item.cityList.forEach(i => {
i.ischeck = false
i.disable = false
})
}
this.cityLists.push(item)
})
},
childChange(item) {
item.num = 0
item.ischeck = true
if (item.cityList && item.cityList.length > 0) {
item.cityList.forEach(items => {
if (items.ischeck) {
item.num ++
}
})
}
if (item.num === 0) {
console.log(item.num)
item.ischeck = false
}
this.$forceUpdate(); //VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
},
itemChange(item) {
item.num = 0 //用于计数
console.log(item, 'item=======')
if(item.cityList && item.cityList.length > 0){
if(item.ischeck){
item.cityList.forEach(items=>{
items.ischeck = true
item.num ++ //一个省有多少个区被选则了
})
}else{
item.cityList.forEach(items=>{
items.ischeck = false
item = 0
})
}
}
this.$forceUpdate();
},
configAdd() {
console.log(this.cityLists,'4444')
let arr = []
if (this.cityLists.length > 0) {
this.cityLists.forEach(item => {
if (item.cityList && item.cityList.length > 0) {
item.cityList.forEach(i => {
if (i.ischeck && !i.disable) {
arr.push(i)
}
})
}
})
}
console.log(arr, '选择的数组')
if (arr.length === 0) {
this.$message('请选择区域')
return
}
this.$emit('on-affirm', arr, this.diatype)
}
}
};
</script>
3,css样式
<style>
.city-list{
display: flex;
align-items: center;
flex-wrap:wrap;
}
.child-one {
width: 300px;
height: 40px;
display: flex;
align-items: center;
padding-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
.city-childs:hover{
display: block;
background: #ecf5ff;
}
.child-ones{
height: 40px;
display: flex;
align-items: center;
padding-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
.city-childs{
display: none;
position: absolute;
top: 40px;
left: 0;
width: 400px;
max-height: 200px;
overflow: auto;
background: #FFFFFF;
z-index: 2;
}
.city-child {
display: none;
position: absolute;
top: 40px;
left: 0;
width: 400px;
max-height: 200px;
overflow: auto;
background: #FFFFFF;
z-index: 2;
}
.city-one {
width: 130px;
height: 40px;
display: flex;
align-items: center;
padding-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
}
.city-one:hover .city-child {
display: block;
/* backgrounhsl(25, 100%, 76%)885; */
background: #ecf5ff;
}
</style>
4,运行环境,node.js
1,运行命令:npm run dev
2,打包命令:npm run build