el-cascader の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+el-cascader へ行く。
• +Vue+el-cascader の差分を削除

#author("2022-09-07T15:11:43+08:00","default:Admin","Admin")
#author("2022-09-07T15:12:03+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents

* 级联选择器 [#hb3f8f71]

#codeprettify{{
<el-form-item label="父部门" prop="pid">
  <el-cascader
    popper-class="el-cascader-device-type"
    v-model="selfForm.pid"
    :options="optDepartments"
    :props="propsMapping"
    :show-all-levels="false"
    @change="optChange()"
    clearable
  ></el-cascader>
</el-form-item>
}}

el-cascader 绑定的 json 数据必须是 value、label、children构造的，propsMapping 用来将其他的数据结构映射到 el-cascader 想要的结构

- 下面的代码只可以选择最下层的节点
#codeprettify{{
data(){
  return {
      propsMapping: { label: 'name', value: 'id', children: 'Children' },
}
}}

- 加入 checkStrictly 后，便可以选择父节点
#codeprettify{{
data(){
  return {
      propsMapping: { checkStrictly: true, label: 'name', value: 'id', children: 'Children' },
}
}}

optDepartments 的数据结构

#codeprettify{{
{
	"name": "生产部",
	"id": "1",
	"Children": [{
		"name": "第一车间",
		"id": "2",
		"Children": [{
			"name": "装配组",
			"id": "3",
			"Children": []
		}]
	}]
}
}}

* Tips [#y9699465]

** 任意选择节点（父级也可） [#kd5c270b]

#codeprettify{{
<template>
  <div style="display: flex; justify-content: center; margin-top: 200px;">
    <el-cascader ref="cascader" v-model="addrCode" :options="options" :props="{ checkStrictly: true, expandTrigger: 'hover', emitPath: false }">
      <template slot-scope="{ node, data }">
        <div @click="cascaderClick(data)">
          <span>{{ data.label }}</span>
          <span>\{\{ data.label \}\}</span>
          <span v-if="!node.isLeaf"> (\{\{ data.children.length \}\}) </span>
        </div>
      </template>
    </el-cascader>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [
        { "label": "广东", "value": "440000", "children": [{ "label": "广州", "value": "440100" }, { "label": "深圳", "value": "440300" }] },
        { "label": "宁夏", "value": "640000", "children": [{ "label": "银川", "value": "640100" }] }
      ],
      addrCode: undefined,
    };
  },
  methods: {
    cascaderClick (nodeData) {
      this.addrCode = nodeData.value;
      this.$refs.cascader.checkedValue = nodeData.value;
      this.$refs.cascader.computePresentText();
      this.$refs.cascader.toggleDropDownVisible(false);
      this.$message({
        message: '已选择：' + nodeData.label,
        type: 'success',
        duration: 1000
      });
    },
  }
};
</script>
}}

#hr();
コメント：
#comment_kcaptcha