el-select change 觸發事件及 clear 清空內容觸發事件

Select 選擇器

當選項過多時，使用下拉菜單展示並選擇內容。

為el-select設置clearable屬性，則可將選擇器清空。需要注意的是，clearable屬性僅適用於單選。

Select Events

事件名稱	說明	回調參數
change	選中值發生變化時觸發	目前的選中值
visible-change	下拉框出現/隱藏時觸發	出現則為 true，隱藏則為 false
remove-tag	多選模式下移除tag時觸發	移除的tag值
clear	可清空的單選模式下用戶點擊清空按鈕時觸發	—
blur	當 input 失去焦點時觸發	(event: Event)
focus	當 input 獲得焦點時觸發	(event: Event)

 

 

 

 

 

 

 

 

實例代碼： 

<el-select v-model="ruleForm.type" placeholder="請選擇" style="width: 95px;" @change="changeValue" clearable @clear="delValue">
                <el-option
                v-for="item in select1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
</el-select>

<script>
export default {
  data() {
    return {
      ruleForm: {
        type: '',
        status: '',
        pageIndex: 1, // 當前頁碼
        pageSize: 10 // 當前每頁顯示條數
      },
      total: 0, // 記錄總數
      select1: [
        {
          value: 1,
          label: '微信'
        },
        {
          value: 2,
          label: '支付寶'
        },
        {
          value: 3,
          label: '蘋果內購'
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 獲取交易流水
    async getList() {
      this.ruleForm.pageIndex = this.ruleForm.pageIndex - 1
      let res = await axios.post('/getGoodsList', this.ruleForm)
      console.log(res)
      this.tableData = res.data.data.data
      this.total = res.data.data.total
    },
    // 選中值發生變化時觸發
    changeValue() {
      this.ruleForm.pageIndex = 1
      this.getList()
    },
    // 點擊清空按鈕時觸發
    delValue() {
       console.log(11)
    }
  }
}
</script>

PS：接口的 pageIndex 字段是從0開始。