vue 中的v-model数据回显问题，然后拼接，还有地区三级联问题
需求一：解决地区三级联动问题
需求二：证书通用名输入可以在证书主题里面回显示并用，或者/分割-----可以参考第一张图片
解决地区三级联动就行采纳需求二先不要
layui实现的三级联动，需要看看吗
可以
加我q:1571488201
那应该用级联选择器组件啊，el-cascader，满足三级联动，可以设置选择必须要选第三级(县级数据)，也支持不设置，选择一级二级三级都行。
官方示例
https://element.eleme.cn/#/zh-CN/component/cascader#jin-xian-shi-zui-hou-yi-ji
代码演示
https://codepen.io/pen/?&editable=true&prefill_data_id=9e228d00-d607-0138-dc39-02420aff0008&referer=https%3A%2F%2Felement.eleme.cn%2F
数据双向绑定怎么给他绑定了
<el-row>
<el-col>
<el-form-item label="国家：" v-if="CheckboxCertificate">
<el-select v-model="cerificate.CN" placeholder="请选择">
<el-option
v-for="item in CN"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="省/自治区(S):" v-if="CheckboxCertificate">
<el-select v-model="cerificate.CN" placeholder="请选择省/自治区(S)">
<el-option
v-for="item in CN"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="市县:" v-if="CheckboxCertificate">
<el-select v-model="cerificate.CN" placeholder="请选择市县">
<el-option
v-for="item in CN"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<li class="border_top"> <label class="text-label">地 区：<span id="county-msg" class="msg"><span style='color:#33cc33' v-if="twonshow">√</span><span style='color:#CC0033' v-if="!twonshow1">请选择地区</span></span></label> <select id="province" name="province" v-model="province" @change="Province()" class="elements"> <option :value="cityShow" selected="selected">请选择</option> <option v-for="(item,index) in provinceArr" :key="index" :value="item">{{item[1]?item[1]:''}}</option> </select> <select id="city" name="city" v-model="city" @change="City()"> <option :value="cityShow" selected="selected">请选择</option> <option v-for="(item,index) in cityArr" :key="index" :value="item">{{item[1]?item[1]:''}}</option> </select> <select id="county" name="county" v-model="district"> <option :value="cityShow" selected="selected">请选择</option> <option v-for="(item,index) in districtArr" :key="index" :value="item">{{item[1]?item[1]:''}}</option> </select> </li>
import cityDate from '@/tool/index.js'//引入本地地址json province:[],//地址省份 city:[],//地址城市 district:[],//地址市辖区 provinceArr:[], cityArr:[], districtArr:[], //获取省 Province(){ this.cityArr = [] this.districtArr = [] this.city = [] this.district = [] for(var i=0;i<cityDate.t.length;i++){ if(cityDate.t[i][2] == this.province[0]){ //console.log('进来了') this.cityArr.push(cityDate.t[i]) //console.log('f',this.cityArr) } } console.log('dd',this.province[0]) }, //获取城市 City(){ this.districtArr = [] this.district = [] //console.log('ss',this.city) for(var i=0;i<cityDate.t.length;i++){ if(cityDate.t[i][2] == this.city[0]){ // console.log('进来了吗？') this.districtArr.push(cityDate.t[i]) } } },
mounted(){
this.provinceArr = cityDate.c
}
绑定数据参考
<el-cascader v-model="cascadeValue" placeholder="请选择" :options="urbanTreeNodeList" :filterable="true" clearable :change-on-select="false"> </el-cascader> // 仅选中一级选项的model值 cascadeValue = ["天津"] // 选中三级选项 cascadeValue = [ "浙江省", "杭州市", "滨江区" ] // 选中二级选项 cascadeValue = [ "天津", "天津市" ] // urbanTreeNodeList = // [{"id":"110000","parentId":"1","label":"北京","value":"北京","children":[{"id":"110100","parentId":"110000","label":"北京市","value":"北京市"}]},{"id":"120000","parentId":"1","label":"天津","value":"天津","children":[{"id":"120100","parentId":"120000","label":"天津市","value":"天津市"}]},{"id":"130000","parentId":"1","label":"河北","value":"河北","children":[{"id":"130100","parentId":"130000","label":"石家庄市","value":"石家庄市"},{"id":"130200","parentId":"130000","label":"唐山市","value":"唐山市"},{"id":"130300","parentId":"130000","label":"秦皇岛市","value":"秦皇岛市"}]}]
他这个js文件里有逻辑了怎么在vue文件里使用
function Dsy() {
this.Items = {};
}
Dsy.prototype.add = function (id, iArray) {
this.Items[id] = iArray;
}
Dsy.prototype.Exists = function (id) {
if (typeof (this.Items[id]) == "undefined") return false;
return true;
}
function change(v) {
var str = "0";
for (i = 0; i < v; i++) {
str += ("_" + (document.getElementById(s[i]).selectedIndex - 1));
};
var ss = document.getElementById(s[v]);
ss.length = 0;
ss.options[0] = new Option(opt0[v], opt0[v]);
if (v && document.getElementById(s[v - 1]).selectedIndex > 0 || !v) {
if (dsy.Exists(str)) {
ar = dsy.Items[str];
for (i = 0; i < ar.length; i++) options[length] = new Option(ar[i], ar[i]);
if (v) options[1].selected = true;
}
}
if (++v < s.length) {
change(v);
}
}
var dsy = new Dsy();
dsy.add("0", ["CN-中国"]);
dsy.add("0_0", ["请选择省/自治区", "安徽", "北京", "福建", "甘肃", "广东", "广西", "贵州", "海南", "河北", "河南", "黑龙江", "湖北", "湖南", "吉林", "江苏", "江西", "辽宁", "内蒙古", "宁夏", "青海", "山东", "山西", "陕西", "上海", "四川", "天津", "西藏", "新疆", "云南", "浙江", "重庆"]);
dsy.add("0_0_1", ["请选择市县", "安庆", "蚌埠", "巢湖", "池州", "滁州", "阜阳", "合肥", "淮北", "淮南", "黄山", "六安", "马鞍山", "宿州", "铜陵", "芜湖", "宣城", "亳州"]);
dsy.add("0_0_2", ["请选择市县", "北京"]);
dsy.add("0_0_3", ["请选择市县", "福州", "龙岩", "南平", "宁德", "莆田", "泉州", "三明", "厦门", "漳州"]);
dsy.add("0_0_4", ["请选择市县", "白银", "定西", "甘南藏族自治州", "嘉峪关", "金昌", "酒泉", "兰州", "临夏回族自治州", "陇南", "平凉", "庆阳", "天水", "武威", "张掖"]);
dsy.add("0_0_5", ["请选择市县", "潮州", "东莞", "佛山", "广州", "河源", "惠州", "江门", "揭阳", "茂名", "梅州", "清远", "汕头", "汕尾", "韶关", "深圳", "阳江", "云浮", "湛江", "肇庆", "中山", "珠海"]);
dsy.add("0_0_6", ["请选择市县", "百色", "北海", "崇左", "防城港", "桂林", "贵港", "河池", "贺州", "来宾", "柳州", "南宁", "钦州", "梧州", "玉林"]);
dsy.add("0_0_7", ["请选择市县", "安顺", "毕节", "贵阳", "六盘水", "黔东南苗族侗族自治州", "黔南布依族苗族自治州", "黔西南布依族苗族自治州", "铜仁", "遵义"]);
dsy.add("0_0_8", ["请选择市县", "白沙黎族自治县", "保亭黎族苗族自治县", "昌江黎族自治县", "澄迈县", "定安县", "东方", "海口", "乐东黎族自治县", "临高县", "陵水黎族自治县", "琼海", "琼中黎族苗族自治县", "三亚", "屯昌县", "万宁", "文昌", "五指山", "儋州"]);
dsy.add("0_0_9", ["请选择市县", "保定", "沧州", "承德", "邯郸", "衡水", "廊坊", "秦皇岛", "石家庄", "唐山", "邢台", "张家口"]);
dsy.add("0_0_10", ["请选择市县", "安阳", "鹤壁", "济源", "焦作", "开封", "洛阳", "南阳", "平顶山", "三门峡", "商丘", "新乡", "信阳", "许昌", "郑州", "周口", "驻马店", "漯河", "濮阳"]);
dsy.add("0_0_11", ["请选择市县", "大庆", "大兴安岭", "哈尔滨", "鹤岗", "黑河", "鸡西", "佳木斯", "牡丹江", "七台河", "齐齐哈尔", "双鸭山", "绥化", "伊春"]);
dsy.add("0_0_12", ["请选择市县", "鄂州", "恩施土家族苗族自治州", "黄冈", "黄石", "荆门", "荆州", "潜江", "神农架林区", "十堰", "随州", "天门", "武汉", "仙桃", "咸宁", "襄樊", "孝感", "宜昌"]);
dsy.add("0_0_13", ["请选择市县", "常德", "长沙", "郴州", "衡阳", "怀化", "娄底", "邵阳", "湘潭", "湘西土家族苗族自治州", "益阳", "永州", "岳阳", "张家界", "株洲"]);
dsy.add("0_0_14", ["请选择市县", "白城", "白山", "长春", "吉林", "辽源", "四平", "松原", "通化", "延边朝鲜族自治州"]);
dsy.add("0_0_15", ["请选择市县", "常州", "淮安", "连云港", "南京", "南通", "苏州", "宿迁", "泰州", "无锡", "徐州", "盐城", "扬州", "镇江"]);
dsy.add("0_0_16", ["请选择市县", "抚州", "赣州", "吉安", "景德镇", "九江", "南昌", "萍乡", "上饶", "新余", "宜春", "鹰潭"]);
dsy.add("0_0_17", ["请选择市县", "鞍山", "本溪", "朝阳", "大连", "丹东", "抚顺", "阜新", "葫芦岛", "锦州", "辽阳", "盘锦", "沈阳", "铁岭", "营口"]);
dsy.add("0_0_18", ["请选择市县", "阿拉善盟", "巴彦淖尔盟", "包头", "赤峰", "鄂尔多斯", "呼和浩特", "呼伦贝尔", "通辽", "乌海", "乌兰察布盟", "锡林郭勒盟", "兴安盟"]);
dsy.add("0_0_19", ["请选择市县", "固原", "石嘴山", "吴忠", "银川"]);
dsy.add("0_0_20", ["请选择市县", "果洛藏族自治州", "海北藏族自治州", "海东", "海南藏族自治州", "海西蒙古族藏族自治州", "黄南藏族自治州", "西宁", "玉树藏族自治州"]);
dsy.add("0_0_21", ["请选择市县", "滨州", "德州", "东营", "菏泽", "济南", "济宁", "莱芜", "聊城", "临沂", "青岛", "日照", "泰安", "威海", "潍坊", "烟台", "枣庄", "淄博"]);
dsy.add("0_0_22", ["请选择市县", "长治", "大同", "晋城", "晋中", "临汾", "吕梁", "朔州", "太原", "忻州", "阳泉", "运城"]);
dsy.add("0_0_23", ["请选择市县", "安康", "宝鸡", "汉中", "商洛", "铜川", "渭南", "西安", "咸阳", "延安", "榆林"]);
dsy.add("0_0_24", ["请选择市县", "上海"]);
dsy.add("0_0_25", ["请选择市县", "阿坝藏族羌族自治州", "巴中", "成都", "达州", "德阳", "甘孜藏族自治州", "广安", "广元", "乐山", "凉山彝族自治州", "眉山", "绵阳", "南充", "内江", "攀枝花", "遂宁", "雅安", "宜宾", "资阳", "自贡", "泸州"]);
dsy.add("0_0_26", ["请选择市县", "天津"]);
dsy.add("0_0_27", ["请选择市县", "阿里", "昌都", "拉萨", "林芝", "那曲", "日喀则", "山南"]);
dsy.add("0_0_28", ["请选择市县", "阿克苏", "阿拉尔", "巴音郭楞蒙古自治州", "博尔塔拉蒙古自治州", "昌吉回族自治州", "哈密", "和田", "喀什", "克拉玛依", "克孜勒苏柯尔克孜自治州", "石河子", "图木舒克", "吐鲁番", "乌鲁木齐", "五家渠", "伊犁哈萨克自治州"]);
dsy.add("0_0_29", ["请选择市县", "保山", "楚雄彝族自治州", "大理白族自治州", "德宏傣族景颇族自治州", "迪庆藏族自治州", "红河哈尼族彝族自治州", "昆明", "丽江", "临沧", "怒江傈傈族自治州", "曲靖", "思茅", "文山壮族苗族自治州", "西双版纳傣族自治州", "玉溪", "昭通"]);
dsy.add("0_0_30", ["请选择市县", "杭州", "湖州", "嘉兴", "金华", "丽水", "宁波", "绍兴", "台州", "温州", "舟山", "衢州"]);
dsy.add("0_0_31", ["请选择市县", "重庆"]);
var s = ["s1", "s2", "s3"];
var opt0 = ["国家"];
/* var opt0 = ["国家","",""]; */
function setup() {
for (i = 0; i < s.length; i++)
document.getElementById(s[i]).onchange = new Function("change(" + (i + 1) + ")");
change(0);
}
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div class="box"> <select v-model="province" @change="city=0;district=0"> <option v-for="(obj,index) in area" :value="index">{{ obj.name }}</option> </select> <select v-model="city" @change="district=0"> <option v-for="(obj,index) in area[province].city" :value="index">{{ obj.name }}</option> </select> <select v-model="district"> <option v-for="(name,index) in area[province].city[city].district" :value="index">{{ name }}</option> </select> </div> <script type="text/javascript"> var dsy = [ { name:"北京市", city: [ { name:"北京全市", district: ["东城区","西城区","崇文区","宣武区","朝阳区","丰台区"] } ]}, { name:"河北省", city: [ { name: "石家庄市", district: ["长安区","桥东区","桥西区"] }, { name: "张家口市", district: ["下花园区","宣化县"] }, { name: "承德市", district: ["双桥区","双滦区","鹰手营子矿区","承德县"] } ]} ]; var vm = new Vue({ el: '.box', data: { province: 0, city: 0, district: 0, area: dsy } }); </script> </body> </html>
大佬可以详谈么
还没解决？
没有
用vue就不能自己重写，非要在原来的js基础上改？
加我QQ 2974693800