欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹型

 更新時間:2022年08月18日 10:39:09   作者:范特西是只貓  
本文主要介紹了vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹型,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 樹型下拉菜單

實(shí)現(xiàn)效果

2. vue頁面代碼

引入selectTree組件

import { selectTree } from '@/components'
export default {
  components: {
    selectTree
  },
  data() {
  	defaultData:{
  		managementStationId:'1478570186653609986',
  		managementStationName:'瀘彌監(jiān)控中心-安全'
  	}
  }
}

頁面使用

  • returnDropList 樹型菜單的值
  • managementStationId key值
  • defaultData 設(shè)置默認(rèn)值
  • treeProps 配置菜單
  • @handleNodeClick 選擇事件
<template>
	<div>
		<selectTree
		  style="width: 390px"
		  :treeList="returnDropList"
		  nodeKey="managementStationId"
		  :defaultData="defaultData"
		  :treeProps="{
		    children: 'children',
		    label: 'managementStationName'
		  }"
		  @handleNodeClick="selectDrop"
		></selectTree>
	</div>
</template>

3.樹型數(shù)據(jù)結(jié)構(gòu)

3. selectTree 組件代碼

<template>
  <el-select
    class="user-select-tree"
    v-model="textStr"
    :placeholder="placeholder"
    ref="select"
    :filterable="true"
    :remote="true"
    :remote-method="remoteMethod"
    :clearable="clearable"
    @clear="clearSelect"
    @visible-change="visibleChange"
    :popper-append-to-body="false"
    style="width: 100%"
  >
    <el-option
      v-model="value"
      style="
        height: 100%;
        max-height: 200px;
        overflow-y: auto;
        padding: 0;
        background-color: #ffffff;
      "
    >
      <el-tree
        :data="treeList"
        :props="treeProps"
        :filter-node-method="filterNode"
        :current-node-key="currentKey"
        highlight-current
        default-expand-all
        :node-key="nodeKey"
        ref="selectTree"
        :check-strictly="true"
        @node-click="handleTreeClick"
      >
        <span
          slot-scope="{ data }"
          :title="data[treeProps.label]"
          class="ellipsis"
        >
          {{ data[treeProps.label] }}
        </span>
      </el-tree>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: 'index',
  props: {
    treeList: {
      type: Array
    }, //樹形原始數(shù)據(jù)
    treeProps: Object, //樹形配置
    nodeKey: String, //樹形唯一鍵值
    defaultSelect: {
      //默認(rèn)選擇
      type: Boolean,
      default: true
    },
    defaultData: {
      type: Object,
      default: null
    },
    clearable: { type: Boolean, default: false },
    placeholder: { type: String, default: '請選擇' }
  },
  data() {
    return {
      textStr: '',
      value: '',
      filterText: '',
      currentKey: '',
      highlightNode: -1
    }
  },
  watch: {
    filterText(val) {
      this.$refs.selectTree.filter(val)
    },
    defaultData(val) {
      if (this.highlightNode === -1) {
       this.setEdit(val)
      }
    },
    treeList(val) {
      if (val.length > 0) {
        this.$nextTick(() => {
          if (this.defaultSelect) {
            this.value = val[0][this.treeProps.children][0][this.nodeKey]
            this.textStr =
              val[0][this.treeProps.children][0][this.treeProps.label]
            this.highlightNode = this.value
            this.currentKey = this.value
            this.$refs.selectTree.setCurrentKey(this.highlightNode)
            this.$emit('handleNodeClick', this.value)
          }
        })
      }
    }
  },

  methods: {
    setEdit(obj) {
      if (obj.name !== '' && obj.value !== '') {
        this.value = obj.value
        this.textStr = obj.name
        this.$nextTick(() => {
          this.highlightNode = this.value
          this.currentKey = this.value
          this.$refs.selectTree.setCurrentKey(this.highlightNode)
        })
      }
    },
    visibleChange() {
      this.filterText = ''
    },
    filterNode(value, data) {
      if (!value) return true
      return data[this.treeProps.label].indexOf(value) !== -1
    },
    remoteMethod(query) {
      setTimeout(() => {
        this.filterText = query
      }, 100)
    },
    // 設(shè)備類型點(diǎn)擊賦值
    handleTreeClick(data, checked) {
      this.filterText = ''
      if (checked) {
        // //判斷是否是父子
        if (
          data[this.treeProps.children] !== undefined &&
          data[this.treeProps.children].length !== 0
        ) {
          this.$refs.selectTree.setCurrentKey(this.highlightNode)
        } else {
          this.value = data[this.nodeKey]
          this.textStr = data[this.treeProps.label]
          this.$forceUpdate()
          this.currentKey = this.value
          this.highlightNode = data[this.nodeKey]
          this.$emit('handleNodeClick', this.value)
          this.$refs.selectTree.setCheckedKeys([this.highlightNode])
          this.$refs.select.blur()
        }
      }
    },
    clearFun() {
      this.value = ''
      this.textStr = ''
      this.currentKey = undefined
      this.highlightNode = undefined
      this.$refs.selectTree.setCurrentKey(this.highlightNode)
    },
    clearSelect() {
      this.value = ''
      this.textStr = ''
      this.$refs.selectTree.setCurrentKey()
      this.$emit('handleNodeClick', '')
    }
  }
}
</script>

<style scoped lang="scss">
.user-select-tree {
  ::v-deep {
    .el-icon-::before {
      content: '\ea1b';
      font-family: 'icomoon' !important;
      display: inline-block;
      -webkit-transform: scale(0.83);
      font-size: 10px;
      //width: 100%;
      //height: 100%;
      color: #666666;
      pointer-events: none;
    }
    .el-input.is-focus {
      .el-icon- {
        transform: rotate(0deg);
      }
    }
    .el-input__inner {
      height: 36px;
      line-height: 36px;
    }
    .el-input__icon {
      line-height: 36px;
    }
    .el-tree-node__content {
      height: 32px;
    }
  }
}
</style>

到此這篇關(guān)于vue el-select與el-tree實(shí)現(xiàn)支持可搜索樹型的文章就介紹到這了,更多相關(guān)vue 可搜索樹型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue3中的ref和reactive響應(yīng)式原理解析

    Vue3中的ref和reactive響應(yīng)式原理解析

    這篇文章主要介紹了Vue3中的ref和reactive響應(yīng)式,本節(jié)主要介紹了響應(yīng)式變量和對象,以及變量和對象在響應(yīng)式和非響應(yīng)式之間的轉(zhuǎn)換,需要的朋友可以參考下
    2022-08-08
  • vuex的使用及持久化state的方式詳解

    vuex的使用及持久化state的方式詳解

    這篇文章主要介紹了vuex的使用及持久化state的方式詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁面更快響應(yīng))

    Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁面更快響應(yīng))

    這篇文章主要介紹了Vue項(xiàng)目打包壓縮的實(shí)現(xiàn)(讓頁面更快響應(yīng)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • 基于Vue3+TypeScript的全局對象的注入和使用詳解

    基于Vue3+TypeScript的全局對象的注入和使用詳解

    這篇文章主要介紹了基于Vue3+TypeScript的全局對象的注入和使用,本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對象的注入和使用,需要的朋友可以參考下
    2022-09-09
  • 解決vue內(nèi)存溢出報(bào)錯的問題

    解決vue內(nèi)存溢出報(bào)錯的問題

    這篇文章主要介紹了解決vue內(nèi)存溢出報(bào)錯的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 淺析vue如何實(shí)現(xiàn)手機(jī)橫屏功能

    淺析vue如何實(shí)現(xiàn)手機(jī)橫屏功能

    在項(xiàng)目開發(fā)中有時候需求需要手動實(shí)現(xiàn)橫屏功能,所以這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)手機(jī)橫屏功能,需要的小伙伴可以參考一下
    2024-03-03
  • 在vue項(xiàng)目中引用Iview的方法

    在vue項(xiàng)目中引用Iview的方法

    iView 是一套基于 Vue.js 的開源 UI 組件庫,主要服務(wù)于 PC 界面的中后臺產(chǎn)品。這篇文章主要介紹了在vue項(xiàng)目中引用Iview的方法,需要的朋友可以參考下
    2018-09-09
  • vue如何清除地址欄參數(shù)

    vue如何清除地址欄參數(shù)

    這篇文章主要介紹了vue如何清除地址欄參數(shù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 前端架構(gòu)vue動態(tài)組件使用基礎(chǔ)教程

    前端架構(gòu)vue動態(tài)組件使用基礎(chǔ)教程

    這篇文章主要為大家介紹了前端架構(gòu)vue動態(tài)組件使用的基礎(chǔ)教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步早日升職加薪
    2022-02-02
  • VueJS事件處理器v-on的使用方法

    VueJS事件處理器v-on的使用方法

    本篇文章主要介紹了VueJS事件處理器v-on的使用方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09

最新評論