• 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=" 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开始。

  • 相关阅读:
    密码保护
    实现搜索功能
    完成个人中心—导航标签
    个人中心标签页导航
    评论列表显示及排序,个人中心显示
    完成评论功能
    从首页问答标题到问答详情页
    首页列表显示全部问答,完成问答详情页布局
    Android基础学习:Android环境搭建
    liunx 硬盘分区
  • 原文地址:https://www.cnblogs.com/joe235/p/13637587.html
Copyright © 2020-2023  润新知