<template>
<div class="test">
<template>
<div class="addCitiesList relative">
<div class="select">
<span>selectspan>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="select多选" prop="selectLabel">
<el-select
style="width: 100%"
v-model="ruleForm.selectLabel"
multiple
@focus="selectFocus"
ref="selectIt"
>
el-select>
el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>提交el-button
>
<el-button @click="resetForm('ruleForm')">重置el-button>
el-form-item>
el-form>
div>
<div class="select">
<span>级联span>
<el-cascader
style="width: 100%"
class="cascader"
:show-all-levels="false"
ref="test"
:options="options"
:props="props"
clearable
@change="handleChange('test')"
v-model="selectedValues"
>el-cascader>
div>
div>
template>
div>
template>
<script>
export default {
data () {
return {
ruleForm: {
selectLabel: [],
idList: [],
},
citiesList: [],
rules: {
selectLabel: [
{ type: 'array', required: true, message: '多选不能为空', trigger: 'change' }
],
},
props: {
multiple: true,
value: 'id',
label: 'name'
},
categoryList: [],
selectedCategories: [],
selectedValues: [
],
options: [],
};
},
mounted () {
this.getCategory()
this.handleChange('test')
},
methods: {
handleChange (value) {
let checkedlist = this.$refs[value].getCheckedNodes()
checkedlist = checkedlist.filter(option => !(option.parent && option.parent.checked))
let idArr = []
this.citiesList = []
for (let i = 0; i < checkedlist.length; i++) {
idArr.push(checkedlist[i].value)
this.citiesList.push(checkedlist[i])
}
this.ruleForm.selectLabel = []
this.ruleForm.idList = []
for (let i = 0; i < this.citiesList.length; i++) {
this.ruleForm.selectLabel.push(this.citiesList[i].label)
this.ruleForm.idList.push(this.citiesList[i].value)
}
console.log(this.ruleForm.selectLabel);
console.log(this.ruleForm.idList);
},
getCategory () {
this.options = [{
"id": 2077,
"name": "钟表\/礼品\/乐器",
"mobile_name": "钟表礼品",
"parent_id": 0,
"level": 1,
"is_show": 1,
"image": "",
"commission": 0,
"commission_rate": 0,
"price_markup": 0,
"children": [
{
"id": 2078,
"name": "钟表",
"mobile_name": "钟表",
"parent_id": 2077,
"level": 2,
"is_show": 1,
"image": "",
"commission": 0,
"commission_rate": 0,
"price_markup": 0,
"children": [
{
"id": 2399,
"name": "闹钟挂钟",
"mobile_name": "闹钟挂钟",
"parent_id": 2078,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-12\/233527895aa5459a15c21f716a28a6c9.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
},
{
"id": 2849,
"name": "机械表",
"mobile_name": "机械表",
"parent_id": 2078,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-13\/bfd6948febe7c1acf9471291989ac579.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
},
{
"id": 2854,
"name": "电子表",
"mobile_name": "电子表",
"parent_id": 2078,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-13\/4e02592c42aa8893d228134d62193cc4.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
},
{
"id": 2857,
"name": "石英表",
"mobile_name": "石英表",
"parent_id": 2078,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-13\/e7d96f8fa834a0f3320a481eb2636100.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
},
{
"id": 2888,
"name": "光能表",
"mobile_name": "光能表",
"parent_id": 2078,
"level": 3,
"is_show": 0,
"image": "",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
}
]
},
{
"id": 2218,
"name": "礼品",
"mobile_name": "礼品",
"parent_id": 2077,
"level": 2,
"is_show": 1,
"image": "",
"commission": 0,
"commission_rate": 0,
"price_markup": 0,
"children": [
{
"id": 2219,
"name": "创意礼品",
"mobile_name": "创意礼品",
"parent_id": 2218,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-23\/c291a5a25ac6d80e8b8acdc0f4bd8ab8.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
},
{
"id": 2227,
"name": "毛绒玩具",
"mobile_name": "毛绒玩具",
"parent_id": 2218,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-12\/f798cf5381f674b5c3ca3dee0a534596.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
},
{
"id": 2228,
"name": "熏香",
"mobile_name": "熏香",
"parent_id": 2218,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-23\/190c7624a81d9ff5c95ea8d0430d7fca.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
},
{
"id": 2229,
"name": "烟具",
"mobile_name": "烟具",
"parent_id": 2218,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-23\/63656c6a0a093889e17df66e67816c4f.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
},
{
"id": 2230,
"name": "美妆礼品",
"mobile_name": "美妆礼品",
"parent_id": 2218,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-23\/92ebb349075136be3b00513394c84008.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
},
{
"id": 2237,
"name": "品牌打火机",
"mobile_name": "品牌打火机",
"parent_id": 2218,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-23\/322aec316e6815110e3d6610aff295fe.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
},
{
"id": 2238,
"name": "电子礼品",
"mobile_name": "电子礼品",
"parent_id": 2218,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-23\/82cdccfcdfeedd090bfc6e05604b205d.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
},
{
"id": 2292,
"name": "礼盒套装",
"mobile_name": "礼盒套装",
"parent_id": 2218,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-23\/c6dcc293b099615ad01bad7fd17f328f.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
},
{
"id": 2696,
"name": "苏格拉宁礼品",
"mobile_name": "苏格拉宁礼品",
"parent_id": 2218,
"level": 3,
"is_show": 0,
"image": "",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
}
]
},
{
"id": 2886,
"name": "乐器",
"mobile_name": "乐器",
"parent_id": 2077,
"level": 2,
"is_show": 1,
"image": "",
"commission": 0,
"commission_rate": 0,
"price_markup": 0,
"children": [
{
"id": 2347,
"name": "弦乐器",
"mobile_name": "弦乐器",
"parent_id": 2886,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-23\/76076988cb09ef0cd2a95c86702dd461.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
},
{
"id": 2357,
"name": "键盘乐器",
"mobile_name": "键盘乐器",
"parent_id": 2886,
"level": 3,
"is_show": 1,
"image": "\/public\/upload\/category\/2020\/11-23\/389a09bf02950e8f78b4d2a6d8859a51.jpg",
"commission": 0,
"commission_rate": 0,
"price_markup": 0
}
]
}
]
}]
const newcat = {
id: -1,
name: "不限制",
mobile_name: "一级分类",
parent_id: 0,
level: 1,
is_show: 0,
image: null,
commission: 0,
commission_rate: 0,
price_markup: 0,
}
this.categoryList.unshift(newcat)
},
selectFocus () {
this.$refs.selectIt.blur();
},
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm (formName) {
this.$refs[formName].resetFields();
}
}
};
script>
