Vue ElementUI 级联选择器支持多选

由于我们部门并没有产品经理，在做一个后台管理系统的过程中遇见了一个比较奇葩的需求，当时觉得如果采用ElemenyUI 的级联选择器岂不是很简单的吗？只是ElementUI的级联选择器并不支持多选，就此作罢。项目上线之后闲来无事，就心血来潮，各种百度之后终于算是写好了一个案列

安装：推荐使用npm安装

npm install ele-multi-cascader

npm install element-ui -S

使用：在main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import ELeMultiCascader from "ele-multi-cascader"
import "ele-multi-cascader/dist/cascader.css"
Vue.use(ElementUI);
Vue.use(ELeMultiCascader);

案列

<template>
  <div id="app">
	<el-form label-width="80px" ref="form" :model="form" :rules="rules" label- 
         position="left">
		<el-form-item label="ISP: " prop="isp">
			<ele-multi-cascader
				clearable
				:options="options"
				v-model="form.isp"
				separator=">"
				placeholder="选择运营商"
				@change="ispChange"
				show-all-levels="true"
				selectChildren="true">
			</ele-multi-cascader>
			</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submit">测试提交</el-button>
				</el-form-item>
			</el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
	  data() {
    return {
      options:  [{
          value: 'zhinan',
          label: '指南',
          disabled: true,
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }]
        }],
      outputs: {
        values: [],
        items: []
      },
      rules: {
        isp: [
          {
            required: true,
            trigger: "change",
            validator(rule, val, cb) {
              if (val.length === 0) {
                cb(new Error("请选择运营商"));
              } else {
                cb();
              }
            }
          }
        ]
      },
      form: {
        isp: []
      }
    };
  },
  methods: {
    ispChange(values, items) {
      this.outputs.values = values;
      this.outputs.items = items;
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$message({
            message: "测试通过",
            type: "success"
          });
        }
      });
    }
  }
}
</script>

<style>

</style>

https://github.com/webCoderJ/ele-multi-cascader#Attributes