Vue--element對會員搜索輸入框增加重置功能

前戲

前面我們已經實現了會員管理的搜索功能，但是有一個點用起來不舒服，當我們搜索完成之后，搜索框里的內容要手動一個一個刪除，耽誤了我們撩小姐姐的時間，我們可以給自己提一個需求，增加一個重置功能，點擊重置清空搜索框里的內容。嗯，人人都是產品經理。

重置

代碼如下

<template>
    <div>

        <!-- 搜索框 -->
    <!-- :inline="true" 表單一行顯示 -->
    <!-- :model="searchMap" 綁定到這個參數上 -->
    <el-form ref="searchForm" :inline="true" :model="searchMap" style="margin-top: 20px">
        <!-- 重置會看 el-form-item 組件元素的 prop 上是否指定了字段名，指定了才會重置生效 -->
        <el-form-item prop="member_card">
          <!--prop需要在data里指定，不指定會出現重置不了的問題， placeholder背景文案 -->
          <el-input v-model="searchMap.member_card" placeholder="會員卡號" style="width: 200px"></el-input>
        </el-form-item>
        <!-- prop重置用 -->
        <el-form-item prop="member_name">
          <el-input v-model="searchMap.member_name" placeholder="會員名字" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item prop="pay_type">
          <el-select v-model="searchMap.pay_type" placeholder="支付類型" style="width: 110px">
            <!-- 不要忘記 payTypeOptions 綁定到data中 -->
            <!-- for循環。label就是看到的中文，value提交到后台的值，也就是1，2，3，4 -->
            <el-option
              v-for="option in payTypeOptions"
              :key="option.pay_type"
              :label="option.name"
              :value="option.pay_type"
            ></el-option>
          </el-select>
        </el-form-item>
  
        <!-- 日期搜索框 -->
        <el-form-item prop="member_birthday">
          <!-- value-format 是指定綁定值的格式 -->
          <el-date-picker
            style="width: 200px"
            value-format="yyyy-MM-dd"
            v-model="searchMap.member_birthday"
            type="date"
            placeholder="出生日期"
          ></el-date-picker>
        </el-form-item>
        <!-- 日期搜索框結束 -->
  
        <el-form-item>
          <el-button type="primary" @click="fetchData">查詢</el-button>
          <!-- searchForm 為搜索框上面 ref 綁定的屬性,resetForm 要在methods里面定義-->
          <el-button @click="resetForm('searchForm')">重置</el-button> 
        </el-form-item>
      </el-form>
      <!-- 搜索框結束 -->



      <!-- 列表頁面
      :data綁定渲染的數據，data 里我們定義的上list
      border 表格邊框，表頭最上面的那個邊框
      height 表格高度
    -->
    <el-table :data="list" height="380" border style="width: 100%">
        <!-- type='index'獲取索引值，從1開始，label顯示的標題，prop接口返回數據的字段名，width列寬，不寫就自動 -->
        <el-table-column type="index" label="序號" width="50"></el-table-column>
        <el-table-column prop="member_card" label="會員卡號" width="180"></el-table-column>
        <el-table-column prop="member_name" label="會員姓名"></el-table-column>
        <el-table-column prop="member_birthday" label="會員生日" width="100"></el-table-column>
        <el-table-column prop="phone_number" label="手機號碼" width="120"></el-table-column>
        <el-table-column prop="card_money" label="可用積分"></el-table-column>
        <el-table-column prop="Available_integral" label="開卡余額"></el-table-column>

        <!-- 支付類型開始 -->
        <el-table-column prop="pay_type" label="支付類型">
            <template slot-scope="scope">
                <!-- 使用過濾器,scope.row.pay_type為接口返回的pay_type的值，后面的是作用在哪個過濾器上面，這里作用在 payTypeFilter 上面-->
                <span>{{scope.row.pay_type | payTypeFilter }}</span>
              </template>
        </el-table-column>
        <!-- 支付類型結束 -->

        <el-table-column prop="member_address" label="會員地址" width='180'></el-table-column>

        <!-- 操作開始，scope 可以獲取行數據 ，scope.row.id 獲取該行數據的 id值-->
        <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit( scope.row.id)">編輯</el-button>
          <!-- 根據后端返回該行的id進行編輯和刪除 -->
          <el-button size="mini" type="danger" @click="handleDelete( scope.row.id)">刪除</el-button>
        </template>
      </el-table-column>
      <!-- 操作結束 -->

    </el-table>
      <!-- 列表頁面結束 -->

     <!-- 分頁 -->
     <!--
         handleSizeChange 改變每頁多少條調用這個方法，會傳選擇的條數過去
         handleCurrentChange 點擊頁碼調用這個方法，會傳點擊的頁碼過去
          current-page當前的頁碼，data里定義的1，默認第一頁
          page-sizes 選擇項，每頁顯示多少條
          page-size 每頁顯示多少條，data里定義
          layout="total, sizes, prev, pager, next, jumper"
          total 總共多少條，去掉后不顯示，sizes選擇項，prev上一頁的箭頭，pager頁碼，next下一頁的箭頭，jumper前往多少頁
        -->
    <el-pagination
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange"
    :current-page="currenPage"
    :page-sizes="[10, 15, 20, 30]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    ></el-pagination>
     <!-- 分頁結束 -->

    </div>
</template>

<script>
import memberApi from "@/api/member"
// 支付類型，不能寫在data里面，會報錯，定義好了在下面寫個 filters 方法
// 然后在列表頁面使用過濾器，接口返回的pay_type是數字，不是字符串
const payTypeOptions = [
  { pay_type: 1, name: "現金" },
  { pay_type: 2, name: "微信" },
  { pay_type: 3, name: "支付寶" },
  { pay_type: 4, name: "銀行卡" }
];

export default{
    data(){
        return {
            list: [],  // 數據傳給list,列表渲染的數據
            total: 0, // 總記錄數，在接口返回數據后賦值給total
            currenPage: 1, // 當前頁碼
            pageSize: 10, // 每頁顯示的數據條數
            searchMap: {
                // 條件查詢綁定的條件值,搜索字段有四個
                member_card: "",
                member_name: "",
                pay_type: "",
                member_birthday: ""
            },
            payTypeOptions, // 這里要申明，要不然搜索框里使用的時候會報錯
          
        }
    },

    created() {
        // 調接口請求數據，將調接口定義一個方法，在created里調用這個方法
        
        this.fetchData()
    },

    methods: {
        fetchData(){
            // 獲取token
            const token = localStorage.getItem('zz-token')
            console.log(token)
            // this.pageSize,this.currenPage 分頁的條數和頁碼，要this.
            memberApi.getList(token,this.pageSize,this.currenPage,this.searchMap).then( response=>{
                const res = response.data
                this.total = res.total  // 將接口返回的total 覆蓋 data里的total
                this.list = res.data  // 將返回數據的data賦值給list
                // console.log(res)
            })

        },
        
        // 編輯
        handleEdit(id){
            console.log('編輯',id)
        },
        // 刪除
        handleDelete(id){
            console.log('刪除',id)
        },
        // 當每頁顯示條數改變后被觸發，val是最新的每頁顯示條數
        handleSizeChange(val) {
            this.pageSize = val;
            this.fetchData();
        },
        // 當頁碼改變后被觸發，val是最新的頁碼
        handleCurrentChange(val) {
            this.currenPage = val;
            this.fetchData();
          },

        // 重置功能,element ui 提供的功能
        resetForm(formName) {
          // 重置要看 el-form-item 組件元素的 prop 上是否指定了字段名，指定了才會重置生效
            this.$refs[formName].resetFields();
          },
        
    },
    filters: {
    // 過濾器，轉換支付類型，type為1，2，3，4
    payTypeFilter(pay_type) {
      const payObj = payTypeOptions.find(obj => {
          // obj 就是上面的一個對象，type和上面對象的type進行對比，在返回
        return obj.pay_type === pay_type;
      });
      // payObj 有值，返回 payObj.name
      return payObj ? payObj.name : null; // 沒找到類型返回null，找到了返回payObj.name
    }
  }
}
</script>

改動地方如下

新增重置按鈕

 

定義 resetForm方法

prop指定字段名

在data里指定哪些字段要重置，要不然會出現輸入不了的情況