element-ui 之 input 搜索联想功能

在 input 内搜索下列选项内容

效果图：

 

 代码实现：

​
<template>
  <div>
      <el-input style="width:350px; margin-left: 100px"
      v-model="searchData"
      placeholder="请输入。..."
      clearable>
      </el-input>
      <el-tree class="tenant_tree"
        :data="list"
        show-checkbox
        :props="defaultProps"
        default-expand-all
        node-key="tenantId"
        ref="tree"
        highlight-current>
      </el-tree>
  </div>
</template>

<script>
export default {
    data() {
        return {
            searchData: '',
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            data:[
                {
                    id: 1,
                    label: '长城汽车',
                },
                {
                    id: 2,
                    label: '一汽奔腾',
                },
                {
                    id: 3,
                    label: '一汽奥迪',
                },
                {
                    id: 4,
                    label: '一汽大众',
                },
                {
                    id: 5,
                    label: '自定义',
                }
            ]
        }
    },
    computed: {
        list(){
            var data = this.data
            var searchData = this.searchData
            if(!searchData){
                return data
            }
            data = data.filter(function(item){
// 这里的 label 是data里面定义的 defaultProps 里 label 的键值'label'，不是键名label！
                if(item.label.indexOf(searchData) !== -1){
                    return item;
                }
            })
            return data
        }
    }
}
</script>

<style>

</style>

​