vue+antDesign 查询和修改信息中遇到的问题

　　vue+antDesign 查询和修改信息中遇到的问题

　　最近在公司实习的时候做任务时，遇到了几个小问题，可能都很简单，勿喷！

　　关于搜索功能

1. 　前端搜索功能(没有搜索按钮的情况下)

　　　　利用v-if或者v-show，建议v-if（初始渲染消耗相对较小）。

　　如果生成的列表项或者表格项包含关键字（搜索框里的输入内容），或者关键字为“”（注意用==，不判断类型），那么就让这个列表项或表格项显示，反之不显 示。　　　　

        <div class="tree" v-if="item.name.includes(keyword) || keyword == ''">
            <div class="title">{{item.name}}</div>
            <div class="desc">{{item.desc}}</div>
        </div>

　　2. 　前端搜索功能(有搜索按钮的情况下）

　　　　我一开始是想通过数组的filter方法来返回找到的对象记录，但这导致以下问题：

　　　　1）原数组被覆盖：

　　　　　　如果给定的搜索条件比较少，只有1、2个，比如“按名称查询”或者“按编号查询”，那么可以这么写：　　　　　

<a-button @click="onSearch">搜索</a-button>
<a-table
      size="middle"
      :columns="columns"
      :data-source="list"
      rowKey="id"
  ></a-table>

this.list = this.list.filter(item => item.name == this.queryInfo.name && item.number== this.queryInfo.number);

　　但是！因为我的table组件绑定的数据源是list，当我把它赋给filter执行返回的结果之后，数据是找到并显示了，但list也彻底变成了找到后的对象数组，也就是会原本的list被修改了。当我想要再一次查询其他数据的时候，是查不到的，因为list里面根本没有其他数据了。

　　所以要怎么解决这个问题呢？我的想法是在页面创建的时候把list的值深拷贝一份给另一个临时变量tempList，然后把table组件的数据源换成tempList。当查询完之后，自动清空搜索框内容，并且在搜索框内容为空的时候，把list的值再深拷贝一份赋给tempList。

<a-button @click="onSearch">搜索</a-button>
<a-table
      size="middle"
      :columns="columns"
      :data-source="tempList"
      rowKey="id"
  ></a-table>

data(){
     return {
        list: [],
        tempList: [],
        queryInfo: {}
    }      
},
created(){
    this.tempList = JSON.parse(JSON.stringify(this.list));
}
methods: {
    onSearch(){
        if(this.queryInfo.name == "" && this.queryInfo.number== ""){
            this.tempList = JSON.parse(JSON.stringify(this.list));
        }else{
            this.tempList = this.list.filter(item => item.name == this.queryInfo.name && item.number == this.queryInfo.number)
        }
    }
}                

　　　但在这样就得保证每搜索一次就得清空一次搜索内容，感觉不大好......办法也是个笨办法，原谅我学艺不精！

　　3.　多条件查询

　　一般会提供一个获取列表的接口，参数包含返回显示数据的页数，每页的数据数以及查询参数。这个时候就可以在点击“搜索”按钮的时候把已填写的条件表单作为查询参数调用该接口，后端来查询，不用做前端查询。

 

关于弹框modal传值

　　比如修改用户，点击表格中某一行记录的“修改”按钮，弹出弹框，弹框内有表单，用来收集修改后的用户信息，然后点击“确定”，验证通过后关闭弹框，并返给表格页面新的修改数据。

　　因为modal组件有一个footer属性，，里面有“确定”跟“取消”按钮，我一开始用了这个属性，但是后面发现，在表格页面中我无法获取到弹框页面的修改数据，也不能控制弹框的显示状态，甚至不能通过 $refs 获取到弹框内的这个表单元素，自然就不能做表单验证和重置，即使用emit，也找不到触发时机，而且表单验证跟重置无法实现，所以很麻烦。
　　后面我通过参考他人的代码，发现可以去掉footer属性，然后在弹框页面再加一个“确定”和“取消”按钮，在它们身上绑定相应事件，就可以实现表单验证和重置，再通过 $emit 把 form数据和弹框显示状态传出去，父组件来控制弹框显示，问题就解决了。　

<!--

表格列表组件内部

-->
<a-modal
      v-model="modal"
      title="title"
      :footer="null">
</a-modal>

<!--
弹框组件内部
-->

<a-row type="flex" justify="end" align="middle">
  <a-space>
    <a-button @click="onCancel">取消</a-button>
    <a-button type="primary" @click="onSubmit">确定</a-button>
  </a-space>
</a-row>