Vue 学习随笔 —— Cascader 级联选择器

前言

一、Cascader 级联选择器

讯享网

二、使用步骤

1. 引入

代码如下：

<el-form-item label="xxx" prop="item" > <el-cascader ref="cascader" clearable :props="props1" :value="id" // v-model 与 value 使用其中一个即可 :options="itemList" // 接口返回的树形字典数据  :show-all-levels="false" placeholder="请选择" @change="handleChange" > </el-cascader> </el-form-item> 

2. 数据定义

代码如下：

讯享网data() { 
    return { 
    props1: { 
    value:'id', label:'label', }, id:[], form: { 
    item: '', itemList: [], // 分类 }, releaseTime: "", } } } 

3. 获取点击label的值

handleChange() { 
    // 使用 getCheckedNodes 可以获取到数组 this.form.item = this.$refs["cascader"].getCheckedNodes()[0].pathLabels[2] console.log("this.form.item",this.form.item) }, 

4、 推荐方法

获取 label 中文值， props 抛出 lebel 值

讯享网 <el-cascader ref="cascader" clearable :value="id" v-model="form.Item" :options="ItemList" :show-all-levels="false" :props="{value: 'label'}" placeholder="请选择" @change="handleDept" > </el-cascader> 

获取 id 值， props 抛出 id 的值

 <el-cascader ref="cascader" clearable :value="id" :options="departmentList" :show-all-levels="false" :props="{value: 'id'}" placeholder="请选择" @change="handleDept" > </el-cascader> 

数据处理，取最后一级

讯享网handleChange(val) { 
    console.log(111, val) if(!val) return this.form.Item = val.slice(-1).toString() }, 

三、补充

tips 1

filterable 表示可在输入框中输入文字进行模糊查询
collapse-tags 表示折叠显示多选项
:show-all-levels=“false” 表示不显示选中项的所有层级，只展示最后一层数据

<el-cascader size="small" style="width: 100%;" placeholder="试试搜索" v-model="form.data" :options="dataOptions" :props="{ multiple: true }" @change="getData" :show-all-levels="false" collapse-tags filterable clearable> </el-cascader> 

tps2

讯享网<el-cascader size="small" style="width: 85%;" :options="profitOptions" v-model="form.data" :props="{ multiple: true, checkStrictly: true, emitPath: false }" :show-all-levels="false" @change="getData" collapse-tags filterable clearable> </el-cascader> <script> ... // 可通过次方法获取多选中的最后一层数据 methods: { 
    getData(val){ 
    let data = val.map( v=> { 
    return v.slice(-1).toString() }) } } </script> 

 <el-cascader size="small" style="width: 85%;" :options="profitOptions" v-model="profitCenterList" :props="{ multiple: true, checkStrictly: true, propsCascader}" :show-all-levels="false" @change="getProfitCenter" collapse-tags filterable clearable> </el-cascader> // 级联选择器回显 getParentsById(list, id) { 
    // list - 数据列表 // id --- 最后一层的 id for (let i in list) { 
    if (list[i][this.propsCascader.value || 'value'] == id) { 
    return [list[i][this.propsCascader.value || 'value']] } if (list[i].children) { 
    let node = this.getParentsById(list[i].children, id) if (node !== undefined) { 
    // 追加父节点 node.unshift(list[i][this.propsCascader.value || 'value']) return node } } } },