由前端实现查询和重置功能

由于这一块没有后端接口，由前端实现查询和重置功能 实现下拉列表中选择查询项，匹配对应的查询项，在输入框中输入查询内容，进行查询。

1、在下拉列表中选择查询项，匹配对应的查询项

handleCommand拿到下拉列表选择的值

<!-- 下拉框，点击选项，绑定到input搜索框，在input搜索框中输入搜索内容，在对应的列数据中查询 -->
  <el-dropdown style="margin-left: -10px" @command="handleCommand">
	<span class="el-dropdown-link">
	  <el-icon class="el-icon--right">
		<arrow-down />
	  </el-icon>
	</span>
	<template #dropdown>
	  <el-dropdown-menu>
		<el-dropdown-item command="phone_id">云手机id</el-dropdown-item>
		<el-dropdown-item command="server_id">服务器id</el-dropdown-item>
		<el-dropdown-item command="phone_name">云手机名称</el-dropdown-item>
		<el-dropdown-item command="access_ip">接入ip</el-dropdown-item>
		<el-dropdown-item command="region">地区</el-dropdown-item>
	  </el-dropdown-menu>
	</template>
  </el-dropdown>

绑定下拉列表和输入框

const searchCommandList = ref([
  { key: "phone_id", label: '请输入云手机id' },
  { key: "server_id", label: '请输入服务器id' },
  { key: "phone_name", label: '请输入云手机名称' },
  { key: "access_ip", label: '请输入接入ip' },
  { key: "region", label: '请输入地区' },
])
const placeholder = ref("请输入云手机名称")

// 搜索下拉框
const searchKey = ref("phone_name")
const handleCommand = (command) => {
  // 此时的查询项
  searchKey.value = command;
  // 更改输入框中的placeholder
  const selectedCommand = searchCommandList.value.find((item) => {
    return item.key === command;   
  });
if (selectedCommand) {
  placeholder.value = selectedCommand.label;
}
}

2、serach功能：遍历tableData数组，将满足筛选条件的数组元素push到searchData数组中，并把最终的searchData赋值给tableDtata

tableDataTemp为备份的tableData数据，每次操作时使用tableDatatemp来进行

const searchData = ref([])
const searchInputName = ref('')

// 查询
const searchUser = () => {
  // 问题1：查询一次后，再次查询，tableData变成了两次查询的并集===>在每次查询前清空searchdata
  searchData.value = [];
  const key = searchInputName.value;
  // 每次操作时使用tableDatatemp来进行
  tableDataTemp.value.forEach(function (item) {
    const searchValue = item[searchKey.value]
    if (searchValue.indexOf(key) > -1) {
      searchData.value.push(item)
    }
  })
  tableData.value = searchData.value;
  total.value = searchData.value.length
}

// 重置筛选，调用后端接口
const resetUser = async () => {
  const res = await getPhoneList(queryForm.value);
  searchInputName.value = '';
  searchData.value = [];
  tableData.value = res.data.content;
  total.value = res.data.count;
}