Vue 学习随笔系列一 -- Cascader 级联选择器

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

前言

随笔一：
记录 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

props 属性加上 emitPath: false ， 可以直接获取到最后一层的数据，不需要再做处理获取最后一层
checkStrictly: true, 属性，选中父级时，可以不选中子级

<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
          }
        }
      }
    },