element-ui 1.树型组件操作单击或者双击的方法、并防止不是同一树节点 2. ​使用select组件远程搜索时回显问题

:expand-on-click-node="false" 
// 做此操作必须要在树使用这个属性，防止点击文字可以让树进行展开。使用此方法只可以点击展开标识符才可以使树进行展开

data() {
    return {
        timer:null, // 用于记录定时器
        nodeCount:0, // 用于判断是否点击2次
        preNodeId:null, // 第一次点击的id
        curNodeId:null, // 当前点击的id
    }
}
// 点击树节点方法
     handleNodeClick(data) {
        clearTimeout(this.timer) // 第一次进来将上一次的定时器清空
        this.timer = setTimeout(() => { // 点击一次触发的定时器方法
          if (!data.children) {
            const {id, label} = data
            this.$refs.selectDom.cachedOptions.push({
              currentLabel: label,
              currentValue: id,
              label: label,
              value: id
            })
            if (!this.is_CC) {
              if (this.form.consignee.indexOf(id) == -1) {
                this.form.consignee.push(id)
              }
            } else {
              if (this.form.copy.indexOf(id) == -1) {
                this.form.copy.push(id)
                this.CC_labels.push({
                  id,
                  label
                })
              }
            }
            this.commVisible = false
          }
          this.preNodeId  = null // 当只点击一次时并且完成将第一次点击的ID清空
          this.nodeCount = 0 // 当只点击一次时并且完成将第一次点击的计数器清零
        },300)
        this.nodeCount++
        if( this.preNodeId && this.nodeCount >= 2){
          this.curNodeId = data.id 
          this.nodeCount = 0
          if(this.curNodeId == this.preNodeId){//第一次点击的节点和第二次点击的节点id相同
            clearTimeout(this.timer) // 进来清空上面执行的定时器，防止定时器的执行
            this.ids = []
            this.labels = []
            this.getTree(data)
            if (!this.is_CC) {
              for (let i = this.ids.length - 1; i >= 0; i--) {
                if (this.form.consignee.indexOf(this.ids[i]) != -1) {
                  this.ids.splice(i,1)
                  this.labels.splice(i,1)
                }
              }
              this.form.consignee.push(...this.ids)
            } else {
              for (let i = this.ids.length - 1; i >= 0; i--) {
                if (this.form.copy.indexOf(this.ids[i]) != -1) {
                  this.ids.splice(i,1)
                  this.labels.splice(i,1)
                }
              }
              this.ids.forEach((item,index)=> {
                this.CC_labels.push({
                  id:item,
                  label: this.labels[index]
                })
              })
              this.form.copy.push(...this.ids)
            }
            for (let i = 0; i < this.ids.length; i++) {
              this.$refs.selectDom.cachedOptions.push({
                currentLabel: this.labels[i],
                currentValue: this.ids[i],
                label: this.labels[i],
                value: this.ids[i]
              })
            }
            this.commVisible = false
            this.curNodeId = null
            this.preNodeId = null      
            return;
          }
        }
        this.preNodeId = data.id // 记录第一次点击ID 用于双击时的判断
      },

​// 源码中是利用cachedOptions方法将当前的下拉选项隐匿储存的集合，那我们可以通过在这个集合中把我们需要显示的选项添加进去，再次进行模糊搜索的时候先将数据清空在进行接口调用赋值

this.$refs.selectDom.cachedOptions.push({
    currentLabel: this.labels[i],
    currentValue: this.ids[i],
    label: this.labels[i],
    value: this.ids[i]
})

​

3. element-plus 全局配置table的超出用tooptip显示
 

import { ElSelect, ElTable } from "element-plus";
ElTable.TableColumn.props.showOverflowTooltip = {
  type: Boolean,
  default: true,
};