+Vue+el-cascader のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+Vue+el-cascader へ行く。
- 1 (2022-05-22 (日) 11:33:32)
- 2 (2022-05-22 (日) 11:46:30)

※前提条件：本文基于 Vue 2.0 创作

级联选择器

<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 想要的结构

下面的代码只可以选择最下层的节点

data(){
  return {
      propsMapping: { label: 'name', value: 'id', children: 'Children' },
}

加入 checkStrictly 后，便可以选择父节点

data(){
  return {
      propsMapping: { checkStrictly: true, label: 'name', value: 'id', children: 'Children' },
}

optDepartments 的数据结构

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

コメント：