Question

当我从ant-design-vue表中选择一行时，我试图调用某个函数。到目前为止，我的代码中已经包含以下内容：

<script>
  const rowSelection = {
     onChange: (selectedRowKeys, selectedRows) => {
       console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
     },
     onSelect: (record, selected, selectedRows) => {
       console.log(record, selected, selectedRows);
     },
     onSelectAll: (selected, selectedRows, changeRows) => {
       console.log(selected, selectedRows, changeRows);
     },
  };
</script>

这来自ant-desing-vue文档。我想在onSelect函数内部调用一个方法，该方法将向父组件发出一个选定的事件，如下所示：

<script>
   ...
   onSelect: (record, selected, selectedRows) => {
     console.log(record, selected, selectedRows);
     this.handleEvent(record);
   },
   ...
   export default {
      methods: {
         handleEvent(record) {
             this.$emit('selected', record);
         }
      }
   }
</script>

但是这显然不起作用，因为this关键字在rowSelection变量中没有相同的引用。那么，为了将数据从行发送到父组件，还有什么替代方案？

编辑：这是带有表的模板：

<a-table
   v-if="this.item.toString() === '1'"
   :columns="columns"
   :row-key="record => record.guid"
   :data-source="filteredList"
   :pagination="pagination"
   :row-selection="rowSelection"
>
</a-table>

Vuejs将行数据发送到父组件

0 个答案: