vue el-dialog中怎么添加搜索框

在Vue的el-dialog中添加搜索框的方法可以有多种，这里提供一种比较简单的实现方式：

1. 在el-dialog中添加一个input框和一个搜索按钮，代码如下：

<template>
  <el-dialog>
    <div slot="title">搜索框</div>
    <div>
      <el-input v-model="searchText" placeholder="请输入搜索内容"></el-input>
      <el-button type="primary" @click="handleSearch()">搜索</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
    };
  },
  methods: {
    handleSearch() {
      // 处理搜索逻辑
    },
  },
};
</script>

2. 在handleSearch方法中添加搜索逻辑，可以使用Vue的computed属性或者watch监听searchText的变化来实现搜索功能。例如：

<template>
  <el-dialog>
    <div slot="title">搜索框</div>
    <div>
      <el-input v-model="searchText" placeholder="请输入搜索内容"></el-input>
      <el-button type="primary" @click="handleSearch()">搜索</el-button>
    </div>
    <div>
      <ul>
        <li v-for="(item, index) in searchResult" :key="index">{{ item }}</li>
      </ul>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      dataList: ['a', 'b', 'c', 'd', 'e'],
    };
  },
  computed: {
    searchResult() {
      return this.dataList.filter((item) =>
        item.toLowerCase().includes(this.searchText.toLowerCase())
      );
    },
  },
  methods: {
    handleSearch() {
      // 处理搜索逻辑
    },
  },
};
</script>

在上面的例子中，搜索结果是根据dataList中的数据进行筛选得到的，可以根据实际需求进行修改。