html:
<!-- select框绑定的值是selectVal,也就是treeData里的value -->
<el-select v-model="selectVal" placeholder="请选择..." size="mini" ref="select" style="width:100%">
<!-- 设置一个input框用作模糊搜索选项功能 -->
<el-input class="input" placeholder="此处键入'关键词'搜索查询" prefix-icon="el-icon-search" v-model="treeFilter" size="mini" clearable style="width:100%">
</el-input>
<!-- 设置一个隐藏的下拉选项,选项显示的是汉字label,值是value -->
<!-- 如果不设置一个下拉选项,下面的树形组件将无法正常使用 -->
<el-option hidden key="id" :value="selectVal" :label="selectName">
</el-option>
<!-- 设置树形控件 @node-click="handleNodeClick" @check-change="getSelcetNode" @check="getSelcetNode"-->
<el-tree :data="treeData" :default-expand-all="true" show-checkbox ref="tree" @check="getSelcetNode" node-key="id" :props="defaultProps" :expand-on-click-node="false"
:check-on-click-node="true" :filter-node-method="filterNode">
<!-- @node-click:树形控件选项点击事件 -->
<!-- :expand-on-click-node:使树形控件只有点箭头图标的时候才会展开或者收缩节点,为false则点文字直接选中该项 -->
<!-- :check-on-click-node:是否在点击节点的时候选中节点,当选项为复选框时有用,这个属性可以删除 -->
<!-- :default-expand-all:默认展开所有节点 -->
<!-- :filter-node-method:实现搜索功能的筛选方法 -->
<span slot-scope="{ data }">
<!-- 选项用插槽来显示,匹配搜索功能,并方便增加tag标签需求 -->
<span>{{ data.label }}</span>
<el-tag size="mini" style="margin: 0 10px" v-show="filterorgType(data.tag)">{{ filterorgType(data.tag) }}</el-tag>
</span>
</el-tree>
</el-select>
data:
data() {
return {
selectVal: '', // select框的绑定值
selectName: '', // select框显示的name
treeFilter: '', // 搜索框绑定值,用作过滤
// 树形控件数据
treeData: [
{
value: '1',
label: '运输管理',
tag: 'TMS',
children: [
{
value: 'tms_dispatch',
label: '调度单',
},
{
value: 'tms_led',
label: '配送单',
},
{
value: 'tms_led_dtl',
label: '配送单明细',
},
{
value: 'tms_order',
label: '订单',
},
{
value: 'tms_order_dtl',
label: '订单明细',
},
{
value: 'tms_shipment',
label: '运单',
},
],
},
{
label: '仓储管理',
value: '2',
tag: 'WMS',
children: [
{
value: 'wms_into_order',
label: '入库单',
},
{
value: 'wms_into_order_dtl',
label: '入库单明细',
},
{
value: 'wms_out_order',
label: '出库单',
},
{
value: 'wms_out_order_dtl',
label: '出库单明细',
},
{
value: 'wms_owner_order',
label: '货权转移单',
},
{
value: 'wms_owner_order_dtl',
label: '货权转移单明细',
},
{
value: 'wms_tally_order',
label: '理货单',
},
{
value: 'wms_tall_order_dtl',
label: '理货单明细',
},
{
value: 'wms_transfer_order',
label: '库存调拨单',
},
{
value: 'wms_transfer_order_dtl',
label: '库存调拨单明细',
},
{
value: 'tms_order_dtl',
label: '订单明细',
},
],
},
],
defaultProps: {
children: 'children',
label: 'name',
},
// 标签数组
tagList: [
{ value: 'TMS', label: 'TMS' },
{ value: 'WMS', label: 'WMS' },
],
}
}
methods: {
// 复选框选中事件
getSelcetNode(data, selStatus) {
if (selStatus.checkedKeys.length != 0) {
let arr1 = []
let arr2 = []
selStatus.checkedNodes.forEach((item, index) => {
if (item.value != null) {
arr1.push(item.value)
arr2.push(item.label)
}
})
this.selectVal = arr1.join(',')
this.selectName = arr2.join(',')
} else {
this.selectVal = ''
this.selectName = ''
}
},
// 模糊查询(搜索过滤),实质为筛选出树形控件中符合输入条件的选项,过滤掉其他选项
filterNode(value, data) {
if (!value) return true
let filterRes = data.label.indexOf(value) !== -1
return filterRes
},
// 选项卡标签(可忽略,增值迭代需求)
filterorgType(val) {
let arr = this.tagList.filter((item) => {
return item.value == val
})
return arr.length ? arr[0].label : ''
},
selectChange(e) {
if (e == '') {
this.selectVal = ''
this.selectName = ''
this.$refs.tree.setCheckedKeys([])
}
},
}