el-cascader
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[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...
- 下面的代码只可以选择最下层的节点
#codeprettify{{
data(){
return {
propsMapping: { label: 'name', value: 'id', childre...
}
}}
- 加入 checkStrictly 后，便可以选择父节点
#codeprettify{{
data(){
return {
propsMapping: { checkStrictly: true, label: 'name',...
}
}}
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; mar...
<el-cascader ref="cascader" v-model="addrCode" :optio...
<template slot-scope="{ node, data }">
<div @click="cascaderClick(data)">
<span>\{\{ data.label \}\}</span>
<span v-if="!node.isLeaf"> (\{\{ data.children....
</div>
</template>
</el-cascader>
</div>
</template>
<script>
export default {
data () {
return {
options: [
{ "label": "广东", "value": "440000", "children":...
{ "label": "宁夏", "value": "640000", "children":...
],
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
終了行:
[[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...
- 下面的代码只可以选择最下层的节点
#codeprettify{{
data(){
return {
propsMapping: { label: 'name', value: 'id', childre...
}
}}
- 加入 checkStrictly 后，便可以选择父节点
#codeprettify{{
data(){
return {
propsMapping: { checkStrictly: true, label: 'name',...
}
}}
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; mar...
<el-cascader ref="cascader" v-model="addrCode" :optio...
<template slot-scope="{ node, data }">
<div @click="cascaderClick(data)">
<span>\{\{ data.label \}\}</span>
<span v-if="!node.isLeaf"> (\{\{ data.children....
</div>
</template>
</el-cascader>
</div>
</template>
<script>
export default {
data () {
return {
options: [
{ "label": "广东", "value": "440000", "children":...
{ "label": "宁夏", "value": "640000", "children":...
],
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
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
