el-select結(jié)合el-tree 并能夠搜索
先貼代碼
<el-select
? ? ? ? ? ? ? ? ? ?ref="select"
? ? ? ? ? ? ? ? ? ?v-model="selectVal"
? ? ? ? ? ? ? ? ? ?placeholder="請(qǐng)選擇..."
? ? ? ? ? ? ? ? ? ?size="mini"
? ? ? ? ? ? ? ? ? ?clearable
? ? ? ? ? ? ? ? ? ?style="width: 130px"
? ? ? ? ? ? ? ? ?>
? ? ? ? ? ? ? ? ? ?<!-- // 設(shè)置一個(gè)input框用作模糊搜索選項(xiàng)功能 -->
? ? ? ? ? ? ? ? ? ?<el-input
? ? ? ? ? ? ? ? ? ? ?v-model="treeFilter"
? ? ? ? ? ? ? ? ? ? ?class="input"
? ? ? ? ? ? ? ? ? ? ?placeholder="此處鍵入'關(guān)鍵詞'搜索查詢"
? ? ? ? ? ? ? ? ? ? ?prefix-icon="el-icon-search"
? ? ? ? ? ? ? ? ? ? ?size="mini"
? ? ? ? ? ? ? ? ? ? ?style="padding: 5px"
? ? ? ? ? ? ? ? ? ? ?clearable
? ? ? ? ? ? ? ? ? ?/>
? ? ? ? ? ? ? ? ? ?<!-- // 設(shè)置一個(gè)隱藏的下拉選項(xiàng)，選項(xiàng)顯示的是漢字label，值是value
? ? ? ?// 如果不設(shè)置一個(gè)下拉選項(xiàng)，下面的樹形組件將無(wú)法正常使用 -->
? ? ? ? ? ? ? ? ? ?<el-option key="id" hidden :value="selectVal" :label="selectName" />
? ? ? ? ? ? ? ? ? ?<!-- // 設(shè)置樹形控件 -->
? ? ? ? ? ? ? ? ? ?<el-tree
? ? ? ? ? ? ? ? ? ? ?ref="tree"
? ? ? ? ? ? ? ? ? ? ?style="padding: 0px 10px 10px 0px"
? ? ? ? ? ? ? ? ? ? ?:data="optionsMetaAll"
? ? ? ? ? ? ? ? ? ? ?:props="defaultProps"
? ? ? ? ? ? ? ? ? ? ?:expand-on-click-node="false"
? ? ? ? ? ? ? ? ? ? ?:check-on-click-node="true"
? ? ? ? ? ? ? ? ? ? ?node-key="id"
? ? ? ? ? ? ? ? ? ? ?:default-expand-all="true"
? ? ? ? ? ? ? ? ? ? ?:filter-node-method="filterNode"
? ? ? ? ? ? ? ? ? ? ?@node-click="handleNodeClick"
? ? ? ? ? ? ? ? ? ?>
? ? ? ? ? ? ? ? ? ? ?<!-- // @node-click：樹形控件選項(xiàng)點(diǎn)擊事件
? ? ?// :expand-on-click-node：使樹形控件只有點(diǎn)箭頭圖標(biāo)的時(shí)候才會(huì)展開或者收縮節(jié)點(diǎn)，為false則點(diǎn)文字直接選中該項(xiàng)
? ? ?// :check-on-click-node：是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候選中節(jié)點(diǎn)，當(dāng)選項(xiàng)為復(fù)選框時(shí)有用，這個(gè)屬性可以刪除
? ? ?// :default-expand-all：默認(rèn)展開所有節(jié)點(diǎn)
? ? ?// :filter-node-method：實(shí)現(xiàn)搜索功能的篩選方法 -->
? ? ? ? ? ? ? ? ? ? ?<span slot-scope="{ data }">
? ? ? ? ? ? ? ? ? ? ? ?<!-- //選項(xiàng)用插槽來(lái)顯示，匹配搜索功能，并方便增加tag標(biāo)簽需求 -->
? ? ? ? ? ? ? ? ? ? ? ?<span>{{ data.label }}</span>
? ? ? ? ? ? ? ? ? ? ? ?<!-- <el-tag
? ? ? ? ? ? ? ? ? ? ? ? ?v-show="filterorgType(data.tag)"
? ? ? ? ? ? ? ? ? ? ? ? ?size="mini"
? ? ? ? ? ? ? ? ? ? ? ? ?style="margin: 0 10px"
? ? ? ? ? ? ? ? ? ? ? ?>{{ filterorgType(data.tag) }}</el-tag> -->
? ? ? ? ? ? ? ? ? ? ?</span>
? ? ? ? ? ? ? ? ? ?</el-tree>
? ? ? ? ? ? ? ? ?</el-select>
這個(gè)是js中的代碼
data() {
? ?return {
? ? ?temp: {},
? ? ?selectVal: '', // select框的綁定值
? ? ?selectName: '', // select框顯示的name
? ? ?treeFilter: '', // 搜索框綁定值，用作過(guò)濾
? ? ?// 樹形控件數(shù)據(jù)
? ? ?optionsMetaAll: [
? ? ? ?{
? ? ? ? ?id: '華成工控平臺(tái)',
? ? ? ? ?label: '華成工控平臺(tái)',
? ? ? ? ?value1: 1,
? ? ? ? ?value2: 2,
? ? ? ? ?children: [
? ? ? ? ? ?{
? ? ? ? ? ? ?id: '深圳市華成工業(yè)控制股份有限公司',
? ? ? ? ? ? ?value1: 1,
? ? ? ? ? ? ?value2: 2,
? ? ? ? ? ? ?label: '深圳市華成工業(yè)控制股份有限公司',
? ? ? ? ? ? ?isNew: true,
? ? ? ? ? ? ?children: [
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ?id: '研發(fā)部門',
? ? ? ? ? ? ? ? ?value1: 3,
? ? ? ? ? ? ? ? ?value2: 4,
? ? ? ? ? ? ? ? ?label: '研發(fā)部門'
? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ?id: '市場(chǎng)部門',
? ? ? ? ? ? ? ? ?value1: 6,
? ? ? ? ? ? ? ? ?value2: 7,
? ? ? ? ? ? ? ? ?label: '市場(chǎng)部門'
? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ?id: '測(cè)試部門',
? ? ? ? ? ? ? ? ?value1: 8,
? ? ? ? ? ? ? ? ?value2: 9,
? ? ? ? ? ? ? ? ?label: '測(cè)試部門'
? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ?id: '財(cái)務(wù)部門',
? ? ? ? ? ? ? ? ?value1: 10,
? ? ? ? ? ? ? ? ?value2: 15,
? ? ? ? ? ? ? ? ?label: '財(cái)務(wù)部門'
? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ?id: '運(yùn)維部門',
? ? ? ? ? ? ? ? ?value1: 0,
? ? ? ? ? ? ? ? ?value2: 0,
? ? ? ? ? ? ? ? ?label: '運(yùn)維部門'
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?]
? ? ? ? ? ?},
? ? ? ? ? ?{
? ? ? ? ? ? ?id: '鄭州分公司',
? ? ? ? ? ? ?value1: 1,
? ? ? ? ? ? ?value2: 2,
? ? ? ? ? ? ?label: '鄭州分公司',
? ? ? ? ? ? ?isNew: true,
? ? ? ? ? ? ?children: [
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ?id: '市場(chǎng)部門',
? ? ? ? ? ? ? ? ?value1: 2,
? ? ? ? ? ? ? ? ?value2: 2,
? ? ? ? ? ? ? ? ?label: '市場(chǎng)部門'
? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ?id: '財(cái)務(wù)部門',
? ? ? ? ? ? ? ? ?value1: 3,
? ? ? ? ? ? ? ? ?value2: 4,
? ? ? ? ? ? ? ? ?label: '財(cái)務(wù)部門'
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?]
? ? ? ? ? ?}
? ? ? ? ?]
? ? ? ?}
? ? ?],
? ? ?defaultProps: {
? ? ? ?children: 'children',
? ? ? ?label: 'name'
? ? ?}
? ? ?// tagList: [
? ? ?// ? { value: 'equipment', label: '設(shè)備' },
? ? ?// ? { value: 'company', label: '公司' },
? ? ?// ? { value: 'department', label: '部門' }
? ? ?// ]
? ?}
?},
?watch: {
? ?// 搜索過(guò)濾，監(jiān)聽input搜索框綁定的treeFilter
? ?treeFilter(val) {
? ? ?this.$refs.tree.filter(val)
? ? ?// 當(dāng)搜索框鍵入值改變時(shí)，將該值作為入?yún)?zhí)行樹形控件的過(guò)濾事件filterNode
? ?}
?},
?methods: {
? ?// 結(jié)構(gòu)樹點(diǎn)擊事件
? ?handleNodeClick(data) {
? ? ?this.temp = data
? ? ?console.log(data)
? ? ?this.selectVal = data.value // select綁定值為點(diǎn)擊的選項(xiàng)的value
? ? ?this.selectName = data.label // input中顯示值為label
? ? ?this.treeFilter = '' // 點(diǎn)擊后搜索框清空
? ? ?this.$refs.select.blur() // 點(diǎn)擊后關(guān)閉下拉框，因?yàn)辄c(diǎn)擊樹形控件后select不會(huì)自動(dòng)折疊
? ?},
? ?// 模糊查詢（搜索過(guò)濾），實(shí)質(zhì)為篩選出樹形控件中符合輸入條件的選項(xiàng)，過(guò)濾掉其他選項(xiàng)
? ?filterNode(value, data) {
? ? ?if (!value) return true
? ? ?const filterRes = data.label.indexOf(value) !== -1
? ? ?return filterRes
? ?},
? ?changeTelescopic(data) {
? ? ?this.temp = data
? ? ?console.log(this.temp)
? ?}
? ?// 選項(xiàng)卡標(biāo)簽（可忽略，增值迭代需求）
? ?// filterorgType(val) {
? ?// ? const arr = this.tagList.filter((item) => {
? ?// ? ? return item.value === val
? ?// ? })
? ?// ? return arr.length ? arr[0].label : ''
? ?// }
?}
