在avue dynamic动态表单中如何实现多选及全选并取值
avue中crud表格行多选的标准用法如下:
<avue-crud ref="crud" :data="data" :option="option" @selection-change="selectionChange">
<template slot="menuLeft" slot-scope="{size}">
<el-button type="success" icon="el-icon-check" :size="size" @click="toggleAllSelection()">选中全部</el-button>
<el-button type="success" icon="el-icon-check" :size="size" @click="toggleRowSelection(data[0])">选中第一行</el-button>
<el-button type="success" icon="el-icon-check" :size="size" @click="toggleSelection([data[1]])">选中第二行</el-button>
<el-button type="danger" icon="el-icon-delete" :size="size" @click="toggleSelection()">取消选择</el-button>
</template>
</avue-crud>
通过@selection-change事件监听可以获取到选中的数据
那如果放到动态表单中,又该如何实现
- 先看一段option配置代码:
column: [{
label: "待选单",
prop: "selectRelList",
type: "dynamic",
span: 24,
children: {
align: "center",
index: false,
selection: true,
tip: false,
columnSort: true,
headerAlign: "center",
type: "crud",
addBtn: false,
delBtn: false,
selectionChange(data) {
vueObj.model.selectedRelList = data;
},
column: [],
}]
不难看出,option中给children(实则是子option)增加selectionChange()方法即可获取到当前选中的数据行。
总结
对于部分事件(@开头的方法),可以把相应的事件名转为驼峰形式在option中进行调用监听