vxe-table 监听下拉选项

项目中引入了vxe-table这个插件。从实际应用来看如果没有特殊的逻辑需求,那这个插件还是挺方便的只需要几行代码便可完成增删改查等一系列的后台项目操作。如果有特殊需求的话,就得好好钻研vxe-table这个文档了。说实话官方文档的api很详尽,也可以说是很多无用api反正我是这么理解的。我在项目里引用的是可编辑的高级表格的因为易于封装(vxe-grid)。

上面都是吐槽的

监听vxe-grid下拉选项

重点就是events属性里面的change对应的是自己的监听方法

editRender: { name: 'ElSelect', props: { clearable: true }, events: { change: this.ptypeChangeEvent }, options: positionList, optionProps: { value: 'positionId', label: 'positionName' }}}

方法里会传入row对象 以及选中的id值

ptypeChangeEvent (row, id) {

},

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了实现vxe-table的多选下拉功能,需要使用vxe-table-plugin-menus插件。以下是一个实现vxe-table多选下拉的例子: ```html <template> <vxe-table ref="xTable" :data="tableData" :columns="columns" :checkbox-config="{ range: true }" :edit-config="{ trigger: 'click', mode: 'cell' }" :toolbar="toolbar" @checkbox-range-change="handleCheckboxRangeChange" ></vxe-table> </template> <script> import 'xe-utils' import VXETable from 'vxe-table' import 'vxe-table/lib/style.css' import menusPlugin from 'vxe-table-plugin-menus' export default { name: 'vxeTableDemo', data() { return { tableData: [ { id: 1, name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', checked: false }, { id: 2, name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', checked: false }, { id: 3, name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', checked: false }, { id: 4, name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', checked: false } ], columns: [ { field: 'id', title: 'ID', width: 80 }, { field: 'name', title: 'Name', width: 120 }, { field: 'age', title: 'Age', width: 80 }, { field: 'address', title: 'Address', width: 220 }, { field: 'checked', title: 'Checked', width: 100, type: 'checkbox' } ], toolbar: { menus: [ { id: 'menu1', title: 'Select All', visibleMethod({ $table }) { return $table && $table.getCheckboxRecords().length < $table.tableData.length }, clickMethod({ $table }) { $table.setCheckboxRow({ checked: true }) } }, { id: 'menu2', title: 'Unselect All', visibleMethod({ $table }) { return $table && $table.getCheckboxRecords().length > 0 }, clickMethod({ $table }) { $table.clearCheckboxRow() } } ] } } }, mounted() { VXETable.use(menusPlugin) this.$refs.xTable.load() }, methods: { handleCheckboxRangeChange({ records }) { console.log(records) } } } </script> ``` 在这个例子中,我们使用了vxe-table-plugin-menus插件来实现多选下拉功能。我们还使用了checkbox-config属性来启用多选框,并使用checkbox-range-change事件来获取所选数据。我们还使用了toolbar属性来添加两个菜单项,以便全选和取消全选。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值