<div class="input_box">
  <el-tree-select
    v-model="searchVal"
    :render-content="renderTree"
    check-strictly
    :data="treeData.list"
    style="width: 294px;"
    @change="change"
    filterable />
</div>

const searchVal = ref('')
const treeData = reactive({list: []})

const renderTree = (
  h,
  {
    node,
    data,
    store,
  },
) => {
  return h(
    'div',
    {
      style: {
        display: 'flex',
        alignItems: 'center',
        width: '100%',
        userSelect: 'none'
      },
      onClick: () => {
        // 如果不是判斷第一層級時，可以在這個地方拿到當前的資料，用一個變數存起來，在通過change返回的value值判斷
        if (data.level === 1) return
        router.push({
          path: '/labelDetail',
          query: {
            title: data.name,
            id: data.id,
            keywords: JSON.stringify(data.range_keywords)
          }
        })
      },
    },
    h('span', {
      style: {
        display: 'inline-block',
        width: node.level === 1 ?'20px' :'',
        height: node.level === 1 ?'16px' :'',
        marginRight: node.level === 1 ?'8px':'',
        background: node.level === 1 ? node.expanded ? `url(${require('@/assets/img/open_node_icon.png')}) no-repeat`
        : `url(${require('@/assets/img/close_node_icon.png')}) no-repeat`
        :``
      },
    }, ''),
    h('p', null, data.name)
  )
}
// 當為一級標籤時 do someing  核心是通過select元件中的change事件 清空value值
const change = (val) =>{
  if(treeData.list.some(item => item.value === val)) {
    searchVal.value = ''
  }
}