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开始。