消息接收人选择

src/views/message/Message.vue

@@ -7,6 +7,9 @@
             line-height: 25px !important;
         }
     }
+    .el-cascader{
+        width:100%;
+    }
 </style>
 <template>
     <section>
@@ -68,14 +71,24 @@
                     <el-input v-model="form1.name" placeholder="请输入标题"></el-input>
                 </el-form-item>
                 <el-form-item label="接收人">
-                    <el-select placeholder="请选择接收人" v-model="form1.receiver_id" multiple>
+                    <!-- <el-select placeholder="请选择接收人" v-model="form1.receiver_id" multiple>
                         <el-option
                             v-for="(item, index) in userList"
                             :key="index"
                             :label="item.name"
                             :value="item.id"
                         ></el-option>
-                    </el-select>
+                    </el-select> -->
+                    <el-cascader
+                        v-model='form1.receiver_id'
+                        :options="options"
+                        :props="props"
+                        clearable>
+                        <template slot-scope="{ node, data }">
+                            <span>{{ data.label }}</span>
+                            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+                        </template>
+                    </el-cascader>
                 </el-form-item>
                 <el-form-item label="问卷模板">
                     <el-select placeholder="请选择问卷模板" v-model="form1.template_id">
@@ -113,7 +126,55 @@ export default {
       defaultProps:{},
       data: [],
       templateList:[],
-      userList:[]
+      userList:[],
+      props: { multiple: true },
+        options: [{
+          value: 1,
+          label: '东南',
+          children: [{
+            value: 2,
+            label: '上海',
+            children: [
+              { value: 3, label: '普陀' },
+              { value: 4, label: '黄埔' },
+              { value: 5, label: '徐汇' }
+            ]
+          }, {
+            value: 7,
+            label: '江苏',
+            children: [
+              { value: 8, label: '南京' },
+              { value: 9, label: '苏州' },
+              { value: 10, label: '无锡' }
+            ]
+          }, {
+            value: 12,
+            label: '浙江',
+            children: [
+              { value: 13, label: '杭州' },
+              { value: 14, label: '宁波' },
+              { value: 15, label: '嘉兴' }
+            ]
+          }]
+        }, {
+          value: 17,
+          label: '西北',
+          children: [{
+            value: 18,
+            label: '陕西',
+            children: [
+              { value: 19, label: '西安' },
+              { value: 20, label: '延安' }
+            ]
+          }, {
+            value: 21,
+            label: '新疆维吾尔族自治区',
+            children: [
+              { value: 22, label: '乌鲁木齐' },
+              { value: 23, label: '克拉玛依' }
+            ]
+          }]
+        }]
     }
   },
   methods:{