在avue dynamic动态表单中如何实现多选及全选并取值

在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中进行调用监听