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