網站首頁 編程語言 正文
========================== 第二次優化 =======================
3、優化組件（實現點擊select輸入框中的×刪除勾選）
<!--
/**
* 樹形下拉選擇組件，下拉框展示樹形結構，提供選擇某節點功能，方便其他模塊調用
* @author ljn
* @date 2019-04-02
* 調用示例：
* <tree-select :height="400" // 下拉框中樹形高度
* :width="200" // 下拉框中樹形寬度
* size="small" // 輸入框的尺寸: medium/small/mini
* :data="data" // 樹結構的數據
* :defaultProps="defaultProps" // 樹結構的props
* multiple // 多選
* clearable // 可清空選擇
* collapseTags // 多選時將選中值按文字的形式展示
* checkStrictly // 多選時，嚴格遵循父子不互相關聯
* :nodeKey="nodeKey" // 綁定nodeKey，默認綁定'id'
* :checkedKeys="defaultCheckedKeys" // 傳遞默認選中的節點key組成的數組
* @popoverHide="popoverHide"> // 事件有兩個參數：第一個是所有選中的節點ID，第二個是所有選中的節點數據
* </tree-select>
*/
-->
<template>
<div>
<div class="mask" v-show="isShowSelect" @click="isShowSelect = !isShowSelect"></div>
<el-popover placement="bottom-start" :width="width" trigger="manual"
v-model="isShowSelect" @hide="popoverHide">
<el-tree class="common-tree" :style="style" ref="tree" :data="data" :props="defaultProps"
:show-checkbox="multiple"
:node-key="nodeKey"
:check-strictly="checkStrictly"
default-expand-all
:expand-on-click-node="false"
:check-on-click-node="multiple"
:highlight-current="true"
@node-click="handleNodeClick"
@check-change="handleCheckChange"></el-tree>
<el-select :style="selectStyle" slot="reference" ref="select" :size="size"
v-model="selectedData"
:multiple="multiple"
:clearable="clearable"
:collapse-tags="collapseTags"
@click.native="isShowSelect = !isShowSelect"
@remove-tag="removeSelectedNodes"
@clear="removeSelectedNode"
@change="changeSelectedNodes"
class="tree-select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-popover>
</div>
</template>
<script>
export default {
name: 'tree-select',
props: {
// 樹結構數據
data: {
type: Array,
default () {
return [];
}
},
defaultProps: {
type: Object,
default () {
return {};
}
},
// 配置是否可多選
multiple: {
type: Boolean,
default () {
return false;
}
},
// 配置是否可清空選擇
clearable: {
type: Boolean,
default () {
return false;
}
},
// 配置多選時是否將選中值按文字的形式展示
collapseTags: {
type: Boolean,
default () {
return false;
}
},
nodeKey: {
type: String,
default () {
return 'id';
}
},
// 顯示復選框情況下，是否嚴格遵循父子不互相關聯
checkStrictly: {
type: Boolean,
default () {
return false;
}
},
// 默認選中的節點key數組
checkedKeys: {
type: Array,
default () {
return [];
}
},
size: {
type: String,
default () {
return 'small';
}
},
width: {
type: Number,
default () {
return 250;
}
},
height: {
type: Number,
default () {
return 300;
}
}
},
data () {
return {
isShowSelect: false, // 是否顯示樹狀選擇器
options: [],
selectedData: [], // 選中的節點
style: 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;',
selectStyle: 'width:' + (this.width + 24) + 'px;',
checkedIds: [],
checkedData: []
};
},
mounted () {
this.initCheckedData();
},
methods: {
// 單選時點擊tree節點，設置select選項
setSelectOption (node) {
let tmpMap = {};
tmpMap.value = node.key;
tmpMap.label = node.label;
this.options = [];
this.options.push(tmpMap);
this.selectedData = node.key;
},
// 單選，選中傳進來的節點
checkSelectedNode (checkedKeys) {
var item = checkedKeys[0];
this.$refs.tree.setCurrentKey(item);
var node = this.$refs.tree.getNode(item);
this.setSelectOption(node);
},
// 多選，勾選上傳進來的節點
checkSelectedNodes (checkedKeys) {
this.$refs.tree.setCheckedKeys(checkedKeys);
},
// 單選，清空選中
clearSelectedNode () {
this.selectedData = '';
this.$refs.tree.setCurrentKey(null);
},
// 多選，清空所有勾選
clearSelectedNodes () {
var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被選中的節點的 key 所組成的數組數據
for (let i = 0; i < checkedKeys.length; i++) {
this.$refs.tree.setChecked(checkedKeys[i], false);
}
},
initCheckedData () {
if (this.multiple) {
// 多選
if (this.checkedKeys.length > 0) {
this.checkSelectedNodes(this.checkedKeys);
} else {
this.clearSelectedNodes();
}
} else {
// 單選
if (this.checkedKeys.length > 0) {
this.checkSelectedNode(this.checkedKeys);
} else {
this.clearSelectedNode();
}
}
},
popoverHide () {
if (this.multiple) {
this.checkedIds = this.$refs.tree.getCheckedKeys(); // 所有被選中的節點的 key 所組成的數組數據
this.checkedData = this.$refs.tree.getCheckedNodes(); // 所有被選中的節點所組成的數組數據
} else {
this.checkedIds = this.$refs.tree.getCurrentKey();
this.checkedData = this.$refs.tree.getCurrentNode();
}
this.$emit('popoverHide', this.checkedIds, this.checkedData);
},
// 單選，節點被點擊時的回調,返回被點擊的節點數據
handleNodeClick (data, node) {
if (!this.multiple) {
this.setSelectOption(node);
this.isShowSelect = !this.isShowSelect;
this.$emit('change', this.selectedData);
}
},
// 多選，節點勾選狀態發生變化時的回調
handleCheckChange () {
var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被選中的節點的 key 所組成的數組數據
this.options = checkedKeys.map((item) => {
var node = this.$refs.tree.getNode(item); // 所有被選中的節點對應的node
let tmpMap = {};
tmpMap.value = node.key;
tmpMap.label = node.label;
return tmpMap;
});
this.selectedData = this.options.map((item) => {
return item.value;
});
this.$emit('change', this.selectedData);
},
// 多選,刪除任一select選項的回調
removeSelectedNodes (val) {
this.$refs.tree.setChecked(val, false);
var node = this.$refs.tree.getNode(val);
if (!this.checkStrictly && node.childNodes.length > 0) {
this.treeToList(node).map(item => {
if (item.childNodes.length <= 0) {
this.$refs.tree.setChecked(item, false);
}
});
this.handleCheckChange();
}
this.$emit('change', this.selectedData);
},
treeToList (tree) {
var queen = [];
var out = [];
queen = queen.concat(tree);
while (queen.length) {
var first = queen.shift();
if (first.childNodes) {
queen = queen.concat(first.childNodes);
}
out.push(first);
}
return out;
},
// 單選,清空select輸入框的回調
removeSelectedNode () {
this.clearSelectedNode();
this.$emit('change', this.selectedData);
},
// 選中的select選項改變的回調
changeSelectedNodes (selectedData) {
// 多選,清空select輸入框時，清除樹勾選
if (this.multiple && selectedData.length <= 0) {
this.clearSelectedNodes();
}
this.$emit('change', this.selectedData);
}
},
watch: {
isShowSelect (val) {
// 隱藏select自帶的下拉框
this.$refs.select.blur();
},
checkedKeys (val) {
if (!val) return;
this.checkedKeys = val;
this.initCheckedData();
}
}
};
</script>
<style scoped>
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0;
z-index: 11;
}
.common-tree{
overflow: auto;
}
.tree-select{
z-index: 111;
}
</style>
========================== 第一次優化 =======================
2、優化組件（實現改變默認選中）
<!--
/**
* 樹形下拉選擇組件，下拉框展示樹形結構，提供選擇某節點功能，方便其他模塊調用
* @author ljn
* @date 2019-03-04
* 調用示例：
* <tree-select :height="400" // 下拉框中樹形高度
* :width="200" // 下拉框中樹形寬度
* size="small" // 輸入框的尺寸: medium/small/mini
* :data="data" // 樹結構的數據
* :defaultProps="defaultProps" // 樹結構的props
* multiple // 多選
* checkStrictly // 多選時，嚴格遵循父子不互相關聯
* :nodeKey="nodeKey" // 綁定nodeKey，默認綁定'id'
* :checkedKeys="defaultCheckedKeys" // 傳遞默認選中的節點key組成的數組
* @popoverHide="popoverHide"> // 事件有兩個參數：第一個是所有選中的節點ID，第二個是所有選中的節點數據
* </tree-select>
*/
-->
<template>
<div>
<div class="mask" v-show="isShowSelect" @click="isShowSelect = !isShowSelect"></div>
<el-popover placement="bottom-start" :width="width" trigger="manual"
v-model="isShowSelect" @hide="popoverHide">
<el-tree class="common-tree" :style="style" ref="tree" :data="data" :props="defaultProps"
:show-checkbox="multiple"
:node-key="nodeKey"
:check-strictly="checkStrictly"
default-expand-all
:expand-on-click-node="false"
:highlight-current="true"
@node-click="handleNodeClick"
@check-change="handleCheckChange"></el-tree>
<el-select :style="selectStyle" slot="reference" ref="select" :size="size"
v-model="selectedData"
:multiple="multiple"
@click.native="isShowSelect = !isShowSelect"
class="tree-select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-popover>
</div>
</template>
<script>
export default {
name: 'tree-select',
props: {
// 樹結構數據
data: {
type: Array,
default () {
return [];
}
},
defaultProps: {
type: Object,
default () {
return {};
}
},
// 配置是否可多選
multiple: {
type: Boolean,
default () {
return false;
}
},
nodeKey: {
type: String,
default () {
return 'id';
}
},
// 顯示復選框情況下，是否嚴格遵循父子不互相關聯
checkStrictly: {
type: Boolean,
default () {
return false;
}
},
// 默認選中的節點key數組
checkedKeys: {
type: Array,
default () {
return [];
}
},
size: {
type: String,
default () {
return 'small';
}
},
width: {
type: Number,
default () {
return 250;
}
},
height: {
type: Number,
default () {
return 300;
}
}
},
data () {
return {
isShowSelect: false, // 是否顯示樹狀選擇器
options: [],
selectedData: [], // 選中的節點
style: 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;',
selectStyle: 'width:' + (this.width + 24) + 'px;',
checkedIds: [],
checkedData: []
};
},
mounted () {
this.initCheckedData();
},
methods: {
initCheckedData () {
if (this.multiple) {
if (this.checkedKeys.length > 0) {
// 勾選上傳進來的節點
this.$refs.tree.setCheckedKeys(this.checkedKeys);
} else {
// 清空所有勾選
var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被選中的節點的 key 所組成的數組數據
for (let i = 0; i < checkedKeys.length; i++) {
this.$refs.tree.setChecked(checkedKeys[i], false);
}
}
} else {
if (this.checkedKeys.length > 0) {
// 選中傳進來的節點
var item = this.checkedKeys[0];
this.$refs.tree.setCurrentKey(item);
var node = this.$refs.tree.getNode(item);
this.selectedData = node.label;
} else {
// 清空選中
this.selectedData = '';
this.$refs.tree.setCurrentKey(null);
}
}
},
popoverHide () {
if (this.multiple) {
this.checkedIds = this.$refs.tree.getCheckedKeys(); // 所有被選中的節點的 key 所組成的數組數據
this.checkedData = this.$refs.tree.getCheckedNodes(); // 所有被選中的節點所組成的數組數據
} else {
this.checkedIds = this.$refs.tree.getCurrentKey();
this.checkedData = this.$refs.tree.getCurrentNode();
}
this.$emit('popoverHide', this.checkedIds, this.checkedData);
},
// 節點被點擊時的回調,返回被點擊的節點數據
handleNodeClick (data, node) {
if (!this.multiple) {
let tmpMap = {};
tmpMap.value = node.key;
tmpMap.label = node.label;
this.options = [];
this.options.push(tmpMap);
this.selectedData = node.label;
this.isShowSelect = !this.isShowSelect;
}
},
// 節點選中狀態發生變化時的回調
handleCheckChange () {
var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被選中的節點的 key 所組成的數組數據
this.options = checkedKeys.map((item) => {
var node = this.$refs.tree.getNode(item); // 所有被選中的節點對應的node
let tmpMap = {};
tmpMap.value = node.key;
tmpMap.label = node.label;
return tmpMap;
});
this.selectedData = this.options.map((item) => {
return item.label;
});
}
},
watch: {
isShowSelect (val) {
// 隱藏select自帶的下拉框
this.$refs.select.blur();
},
checkedKeys (val) {
if (!val) return;
this.checkedKeys = val;
this.initCheckedData();
}
}
};
</script>
<style scoped>
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0;
}
.common-tree{
overflow: auto;
}
</style>
<style>
.tree-select .el-select__tags .el-tag .el-tag__close{
display: none;
}
.tree-select .el-select__tags .el-tag .el-icon-close{
display: none;
}
</style>
調用
<template>
<div>
<el-button size="small" @click="initChecked" style="margin: 10px;">初始化</el-button>
<tree-select :data="data"
:defaultProps="defaultProps" multiple
:nodeKey="nodeKey" :checkedKeys="defaultCheckedKeys"
@popoverHide="popoverHide"></tree-select>
</div>
</template>
<script>
import TreeSelect from '@/components/tree-select.vue';
var menus = [
{
'menuId': 1,
'menuName': '系統管理',
'childrenList': [
{
'menuId': 100,
'menuName': '用戶管理',
'childrenList': [
{
'menuId': 1000,
'menuName': '用戶查詢'
},
{
'menuId': 1001,
'menuName': '用戶新增'
},
{
'menuId': 1002,
'menuName': '用戶修改'
},
{
'menuId': 1003,
'menuName': '用戶刪除'
}
]
},
{
'menuId': 101,
'menuName': '角色管理',
'childrenList': [
{
'menuId': 1006,
'menuName': '角色查詢'
},
{
'menuId': 1007,
'menuName': '角色新增'
},
{
'menuId': 1008,
'menuName': '角色修改'
},
{
'menuId': 1011,
'menuName': '刪除角色'
}
]
}
]
}
];
export default {
name: 'home',
components: { TreeSelect },
data () {
return {
data: menus,
defaultProps: {
children: 'childrenList',
label: 'menuName'
},
nodeKey: 'menuId',
defaultCheckedKeys: []
};
},
created () {},
mounted () {
// 組建中增加了監聽數據變化的，
// 此處初始化defaultCheckedKeys的值，有效果
this.defaultCheckedKeys = [1001];
},
methods: {
// 改變默認選中的節點數據
initChecked () {
this.defaultCheckedKeys = [1006, 1007];
},
popoverHide (checkedIds, checkedData) {
console.log(checkedIds);
console.log(checkedData);
}
}
};
</script>
<style scoped>
</style>
===========================分割線=========================
1、第一次封裝TreeSelect組件
<!--
/**
* 下拉選擇樹形組件，下拉框展示樹形結構，提供選擇某節點功能，方便其他模塊調用
* @author ljn
* @date 2019-02-23
* 調用示例：
* <tree-select :height="400" // 下拉框中樹形高度
* :width="200" // 下拉框中樹形寬度
* :data="data" // 樹結構的數據
* :defaultProps="defaultProps" // 樹結構的props
* multiple // 多選
* checkStrictly // 多選時，嚴格遵循父子不互相關聯
* :nodeKey="nodeKey" // 綁定nodeKey，默認綁定'id'
* :checkedKeys="defaultCheckedKeys" // 傳遞默認選中的節點key組成的數組
* @popoverHide="popoverHide"> // 事件有兩個參數：第一個是所有選中的節點ID，第二個是所有選中的節點數據
* </tree-select>
*/
-->
<template>
<div>
<div class="mask" v-show="isShowSelect" @click="isShowSelect = !isShowSelect"></div>
<el-popover placement="bottom-start" :width="width" trigger="manual"
v-model="isShowSelect" @hide="popoverHide">
<el-tree class="common-tree" :style="style" ref="tree" :data="data" :props="defaultProps"
:show-checkbox="multiple"
:node-key="nodeKey"
:check-strictly="checkStrictly"
default-expand-all
:expand-on-click-node="false"
:default-checked-keys="defaultCheckedKeys"
:highlight-current="true"
@node-click="handleNodeClick"
@check-change="handleCheckChange"></el-tree>
<el-select :style="selectStyle" slot="reference" ref="select"
v-model="selectedData"
:multiple="multiple"
@click.native="isShowSelect = !isShowSelect"
class="tree-select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-popover>
</div>
</template>
<script>
export default {
name: 'tree-select',
props: {
// 樹結構數據
data: {
type: Array,
default () {
return [];
}
},
defaultProps: {
type: Object,
default () {
return {};
}
},
// 配置是否可多選
multiple: {
type: Boolean,
default () {
return false;
}
},
nodeKey: {
type: String,
default () {
return 'id';
}
},
// 顯示復選框情況下，是否嚴格遵循父子不互相關聯
checkStrictly: {
type: Boolean,
default () {
return false;
}
},
// 默認選中的節點key數組
checkedKeys: {
type: Array,
default () {
return [];
}
},
width: {
type: Number,
default () {
return 250;
}
},
height: {
type: Number,
default () {
return 300;
}
}
},
data () {
return {
defaultCheckedKeys: [],
isShowSelect: false, // 是否顯示樹狀選擇器
options: [],
selectedData: [], // 選中的節點
style: 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;',
selectStyle: 'width:' + (this.width + 24) + 'px;',
checkedIds: [],
checkedData: []
};
},
mounted () {
if (this.checkedKeys.length > 0) {
if (this.multiple) {
this.defaultCheckedKeys = this.checkedKeys;
this.selectedData = this.checkedKeys.map((item) => {
var node = this.$refs.tree.getNode(item);
return node.label;
});
} else {
var item = this.checkedKeys[0];
this.$refs.tree.setCurrentKey(item);
var node = this.$refs.tree.getNode(item);
this.selectedData = node.label;
}
}
},
methods: {
popoverHide () {
if (this.multiple) {
this.checkedIds = this.$refs.tree.getCheckedKeys(); // 所有被選中的節點的 key 所組成的數組數據
this.checkedData = this.$refs.tree.getCheckedNodes(); // 所有被選中的節點所組成的數組數據
} else {
this.checkedIds = this.$refs.tree.getCurrentKey();
this.checkedData = this.$refs.tree.getCurrentNode();
}
this.$emit('popoverHide', this.checkedIds, this.checkedData);
},
// 節點被點擊時的回調,返回被點擊的節點數據
handleNodeClick (data, node) {
if (!this.multiple) {
let tmpMap = {};
tmpMap.value = node.key;
tmpMap.label = node.label;
this.options = [];
this.options.push(tmpMap);
this.selectedData = node.label;
this.isShowSelect = !this.isShowSelect;
}
},
// 節點選中狀態發生變化時的回調
handleCheckChange () {
var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被選中的節點的 key 所組成的數組數據
this.options = checkedKeys.map((item) => {
var node = this.$refs.tree.getNode(item); // 所有被選中的節點對應的node
let tmpMap = {};
tmpMap.value = node.key;
tmpMap.label = node.label;
return tmpMap;
});
this.selectedData = this.options.map((item) => {
return item.label;
});
}
},
watch: {
isShowSelect (val) {
// 隱藏select自帶的下拉框
this.$refs.select.blur();
}
}
};
</script>
<style scoped>
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0;
}
.common-tree{
overflow: auto;
}
</style>
<style>
.tree-select .el-select__tags .el-tag .el-tag__close{
display: none;
}
.tree-select .el-select__tags .el-tag .el-icon-close{
display: none;
}
</style>
調用及效果
<template>
<div>
<tree-select :data="data"
:defaultProps="defaultProps" multiple
:nodeKey="nodeKey" :checkedKeys="defaultCheckedKeys"
@popoverHide="popoverHide"></tree-select>
</div>
</template>
<script>
import TreeSelect from '@/components/tree-select2.vue';
var menus = [
{
'menuId': 1,
'menuName': '系統管理',
'childrenList': [
{
'menuId': 100,
'menuName': '用戶管理',
'childrenList': [
{
'menuId': 1000,
'menuName': '用戶查詢'
},
{
'menuId': 1001,
'menuName': '用戶新增'
},
{
'menuId': 1002,
'menuName': '用戶修改'
},
{
'menuId': 1003,
'menuName': '用戶刪除'
}
]
},
{
'menuId': 101,
'menuName': '角色管理',
'childrenList': [
{
'menuId': 1006,
'menuName': '角色查詢'
},
{
'menuId': 1007,
'menuName': '角色新增'
},
{
'menuId': 1008,
'menuName': '角色修改'
},
{
'menuId': 1011,
'menuName': '刪除角色'
}
]
}
]
}
];
export default {
name: 'home',
components: { TreeSelect },
data () {
return {
data: menus,
defaultProps: {
children: 'childrenList',
label: 'menuName'
},
nodeKey: 'menuId',
defaultCheckedKeys: []
};
},
created () {
// 注意：初始化defaultCheckedKeys時，在created里面
// 父組件先執行自己的created，然后子組件開始執行自己的created和mounted，最后父組件再執行自己的mounted。
// 因為此頁面加載，先執行該組件自己的created，然后執行TreeSelect組件的created和mounted，最后執行該組件的mounted
this.defaultCheckedKeys = [1000];
},
mounted () {
// 此處初始化defaultCheckedKeys，沒效果
this.defaultCheckedKeys = [1001];
},
methods: {
popoverHide (checkedIds, checkedData) {
console.log(checkedIds);
console.log(checkedData);
}
}
};
</script>
<style scoped>
</style>
（1）單選
（2）多選
原文鏈接：https://blog.csdn.net/sleepwalker_1992/article/details/87894588
相關推薦
- 2022-11-01 Git操作規范之tag的使用技巧詳解_相關技巧
- 2022-10-03 react實現數據監聽方式_React
- 2022-06-01 React經典面試題之倒計時組件詳解_React
- 2022-06-18 C語言圖文并茂詳解鏈接過程_C 語言
- 2023-11-22 python使用matplotlib.pyplot畫不了圖
- 2022-11-14 C++設計與聲明超詳細講解_C 語言
- 2024-02-26 Example動態（多條件）查詢
- 2022-06-01 Android實現拍照或者選取本地圖片_Android
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速