如何一步步基于element-ui封装查询组件

下面是一步步基于element-ui封装查询组件的完整攻略。

步骤一：安装element-ui

首先，我们需要在项目中安装并引入element-ui，可以通过以下命令进行安装：

npm install element-ui -S

引入element-ui：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

步骤二：创建查询组件

我们可以通过以下代码创建一个简单的查询组件：

<template>
  <div>
    <el-input v-model="keyword" placeholder="请输入搜索内容"></el-input>
    <el-button type="primary" @click="handleSearch">搜索</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      keyword: ''
    }
  },
  methods: {
    handleSearch () {
      this.$emit('search', this.keyword)
    }
  }
}
</script>

这个查询组件中包含了一个输入框和一个搜索按钮，当我们点击搜索按钮时，会触发一个名为search的事件，并将当前输入框中的值作为参数传递给父组件。

步骤三：封装查询组件

我们可以将查询组件进行封装，以便于在项目中多次使用。

<template>
  <div>
    <el-input v-model="keyword" placeholder="请输入搜索内容"></el-input>
    <el-button type="primary" @click="handleSearch">搜索</el-button>
  </div>
</template>

<script>
export default {
  name: 'el-search',

  props: {
    value: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      keyword: this.value
    }
  },

  methods: {
    handleSearch () {
      this.$emit('update:value', this.keyword)
      this.$emit('search', this.keyword)
    }
  },

  watch: {
    value (val) {
      this.keyword = val
    }
  }
}
</script>

在这个封装的查询组件中，我们将输入框的默认值和初始值都设置为父组件传递的value值。当我们在输入框中输入内容并点击搜索按钮时，会同时触发一个名为update:value的事件，以便于父组件可以同步查询组件中输入框的值。此外，我们还对value进行了监听，当父组件的value值发生变化时，我们可以同步更新查询组件中的输入框的值。

示例一：在表格中使用查询组件

下面我们通过一个示例，来说明如何在表格中使用查询组件。

<template>
  <div>
    <el-search v-model="keyword" @search="handleSearch"></el-search>

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        sortable>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import ElSearch from '@/components/ElSearch'

export default {
  components: { ElSearch },

  data () {
    return {
      keyword: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },

  methods: {
    handleSearch (keyword) {
      // 根据关键字搜索数据并更新表格
      console.log('search', keyword)
    }
  }
}
</script>

在这个示例中，我们在表格上方使用了查询组件，并通过绑定keyword变量实现了同步。当我们输入关键字并点击搜索按钮时，会触发父组件的handleSearch方法。我们可以在handleSearch方法中实现搜索并更新表格的逻辑。

示例二：在树形结构中使用查询组件

下面我们再来一个示例，来说明如何在树形结构中使用查询组件。

<template>
  <div>
    <el-search v-model="keyword" @search="handleSearch"></el-search>

    <el-tree
      :data="treeData"
      show-checkbox
      default-expand-all
      :filter-node-method="filterNode"></el-tree>
  </div>
</template>

<script>
import ElSearch from '@/components/ElSearch'

export default {
  components: { ElSearch },

  data () {
    return {
      keyword: '',
      treeData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }]
    }
  },

  methods: {
    handleSearch (keyword) {
      // 根据关键字搜索并展开符合条件的节点
      console.log('search', keyword)
    },

    filterNode (value, data) {
      // 根据关键字过滤节点
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

在这个示例中，我们在树形结构上方使用了查询组件，并通过绑定keyword变量实现了同步。当我们输入关键字并点击搜索按钮时，会触发父组件的handleSearch方法。我们可以在handleSearch方法中实现根据关键字搜索并展开符合条件的节点的逻辑，并通过filter-node-method属性来实现根据关键字过滤节点的功能。