el-cascader 级联搜索高亮

最新推荐文章于 2024-04-26 09:30:00 发布

闫炳岳

最新推荐文章于 2024-04-26 09:30:00 发布

阅读量292

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/yanby921005/article/details/134561545

版权

<template>
  <div class="my-auto-complete-box">
    <el-cascader
      :key="key"
      ref="cascader"
      v-model="dateValue"
      size="small"
      :placeholder="$attrs.placeholder"
      filterable
      clearable
      :options="options"
      style="width:100%;"
      @change="handleChange"
    />
  </div>
</template>
<script>

export default {
  name: 'SearchCascader',
  props: {
    defaultValue: {
      type: Array,
      default: () => []
    },
    formId: {
      type: String,
      default: ''
    },
    checkedList: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    },
    action: {
      type: Function,
      default: () => ({})
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dateValue:[],
      dataLists: [],
      key: ''
    }
  },
  watch:{
    defaultValue(val) {
      console.log(9999,val)
      this.key = Date.now()
      this.dateValue = val
    }
  },
  mounted() {

  },
  methods: {
    handleChange(val) {
      console.log(888,val)
      this.dateValue = val
      this.$refs.cascader.$refs.panel.clearCheckedNodes()
      this.$refs.cascader.$refs.panel.activePath = []
      this.$refs.cascader.$refs.panel.calculateCheckedNodePaths()
      this.action({ value: val, formId: this.formId })
    },
    handleSelect(item) {
      this.action({ value: item.value, formId: this.formId })
    }
  }
}
</script>

关键代码就三行

this.$refs.cascader.$refs.panel.clearCheckedNodes()
this.$refs.cascader.$refs.panel.activePath = []
this.$refs.cascader.$refs.panel.calculateCheckedNodePaths()