组件twoMultipleChoice

整页模板，可Ctrl+A复制完整粘贴

<template> <view> <u-popup :show="popup_show" round="10" closeOnClickOverlay @close="popup_close"> <view> <view class="font-bold p-20 text-center">{{ title }}</view> </view> <view class="flex"> <view style="width: 200rpx;background-color: #f1f1f1;"> <scroll-view style="height: 650rpx" scroll-y> <view class="p-25 font-28" :style="{background: (current_index === index? '#FFF' : '')}" @click="current_index_change(index)" v-for="(item, index) in list" :key="index"> {{ item[label] }} </view> </scroll-view> </view> <view class="flex-1"> <scroll-view style="height: 650rpx" scroll-y> <view> <view class="font-28 flex-b p-25" @click="current_index2_check(item, index)" :class="{'active': item.checked}" v-for="(item, index) in list[current_index]._child" :key="index"> <view>{{ item[label] }}</view> <view v-if="item.checked"> <u-icon name="checkbox-mark" color="#FFA65E"></u-icon> </view> </view> </view> </scroll-view> </view> </view> <view class="flex p-20" style="width: 750rpx;box-sizing: border-box;padding-bottom: 0;height: 145rpx;"> <view class="btn" @click="reset()"> 重置 </view> <view class="m-l-20 flex-1 btn btn2" @click="confirm()"> 确定 </view> </view> </u-popup> </view> </template> <script> export default { name: "twoMultipleChoice", props: { //标题 title: { type: String, default: "工作区域" }, //名称 label: { type: String, default: "name" }, //名称的值 value: { type: String, default: "value" }, //是否一级有不限，默认有 isOneUnlimited: { type: Boolean, default: true } }, data() { return { popup_show: false, current_index: 0, list: [{ name: "江苏省", value: "3", _child: [{ name: "不限", value: "4", checked: true, }, { name: "南通市", value: "5", checked: false, }, { name: "北京市", value: "5", checked: false, }] }], list_copy: [{ }] } }, created() { if (this.isOneUnlimited) { this.list.unshift({ [this.label]: "不限", [this.value]: 0, checked: true, _child: [{ name: "不限", value: 0, checked: true, }] }) } this.list_copy = JSON.parse(JSON.stringify(this.list)) // this.get_list() }, methods: { get_list() { this.$hyRequest.post({ url: "/Area/tree_new" }).then(res => { if (this.isOneUnlimited) { res.unshift({ [this.label]: "不限", [this.value]: 0, checked: true, _child: [] }) console.log(res, "999"); } res.map(item => { item._child.unshift({ [this.label]: "不限", checked: true }) }) this.list = res this.list_copy = JSON.parse(JSON.stringify(this.list)) console.log(res, "000"); }) }, current_index_change(index) { this.current_index = index }, current_index2_check(item, index) { if (this.list[this.current_index][this.label] === "不限") { this.reset() } else { if (item[this.label] !== "不限") { item.checked = !item.checked this.list[this.current_index]._child[0].checked = false this.list[0]._child[0].checked = false let flag = true this.list[this.current_index]._child.map(item => { if (item.checked) { flag = false } }) if (flag) { this.list[this.current_index]._child[0].checked = true } if (this.list[0][this.label] === "不限") { let flag2 = true this.list.map((item, index) => { if (item._child[0].checked === false && index !== 0) { flag2 = false } }) if (flag2) { this.list[0]._child[0].checked = true } } } else { this.list[this.current_index]._child.map(item => item.checked = false) item.checked = true let flag2 = true this.list.map((item, index) => { if (item._child[0].checked === false && index !== 0) { flag2 = false } }) if (flag2) { this.list[0]._child[0].checked = true } } } }, reset() { this.list = JSON.parse(JSON.stringify(this.list_copy)) }, popup_open() { this.popup_show = true }, popup_close() { this.popup_show = false }, confirm() { let arr = [] let arr_text = [] this.list.map(item => { item._child.map((item2, index2) => { if (index2 !== 0 && item2.checked) { arr.push(item2[this.value]) arr_text.push(item2[this.label]) } }) }) let obj = {} this.$emit("areaConfirm", obj = { arr: arr, arr_text: arr_text }) this.popup_close() } } } </script> <style lang="scss"> .active { color: #FFA65E } .btn { width: 150rpx; height: 100rpx; text-align: center; line-height: 100rpx; font-size: 30rpx; color: #FFA65E; background-color: #FFECDC; border-radius: 10rpx; } .btn2 { background-color: #FFA65E; color: #333333; font-size: 30rpx; font-weight: bold; } </style>

使用

<u-button text="打开" @click="aaa()"></u-button> <twoMultipleChoice ref="twoMultipleChoice" @areaConfirm="areaConfirm"></twoMultipleChoice> aaa() { this.$refs.twoMultipleChoice.popup_open() }, areaConfirm(e) { console.log(e); },

后端代码

<?php namespace app\index\controller; use think\facade\Db; class Area extends Base { public function tree() { $data = Db::name('area')->field('area_id,area_name,area_pid')->select()->toArray(); foreach ($data as &$vo) { $vo['checked'] = false; } $tree = list_to_tree($data, 'area_id', 'area_pid'); return json(['status'=>1, 'msg'=>'查询成功', 'data'=>$tree]); } /** * 属性映射 */ public static function _map($ids) { if (!is_array($ids)) { $ids = explode(',', $ids); } if (count($ids) > 0) { $name_array = Db::name('area')->where('area_id', 'in', $ids)->column('area_name'); return $name_array; } else { return []; } } } ?>