vue+antd 父子组件如何传递参数

父子组件如何传递参数或者是从当前组件如何向另一个组件传递参数,在这里我们使用props属性。

//父组件点击编辑按钮将跳转到编辑弹窗,同时需要将获取到的数据传入
<a-table :columns="columns" :data-source="dataSource" bordered >
    <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-button type="link" @click="openDialog({ formData: record, status: 'edit' })">编辑</a-button>
        </template>
    </template>
</a-table>
//javascript
//打开编辑弹窗--EditModel编辑组件
const openDialog = function (props) {
  $dialog(EditModel, { ...props }).then((returnData) => {
    if (typeof returnData !== 'undefined') refreshData() //refreshData() 查询列表
  })
};
//子组件进行定义
const props = defineProps({
  _close: Function,// 关闭dialog的方法,自动注入的
  status: String,
  formData: {
        type: Object,
        default: {}
    },
});
console.log(props.status);
//一般穿过来的组件是“只读”的,可以重新定义赋值
const formData = reative(props.formdata)
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue antd table 是一种非常方便的数据表格组件,可以用来展示和管理大量的数据信息。在使用中,我们有时候需要在某个单元格里面嵌套一个表格,用来展示更详细的数据信息。这种场景下,我们需要实现vue antd table一格加多行的效果。 实现这个效果的方法有多种,这里介绍一种比较简单的方式: 1. 首先,在vue antd table中找到需要嵌套的单元格,给它加上一个 slot 插槽。例如: ```html <a-table-column title="姓名"> <template slot-scope="text, record"> <span>{{ record.name }}</span> <div slot="expandedRowRender"> <p>更详细的信息。。。</p> <p>更详细的信息。。。</p> <p>更详细的信息。。。</p> </div> </template> </a-table-column> ``` 这里要注意,设置 slot 的名称为 expandedRowRender,这样才可以使多行数据展开在同一个单元格内。 2. 接着,在 a-table 中添加一个属性,用来指定当前表格是否支持展开行:expandedRowRender。例如: ```html <a-table :columns="columns" :data-source="data" :pagination="false" :expanded-row-render="true"></a-table> ``` 这里要注意,设置 expanded-row-render 的值为 true,表示允许展开行。当然,还可以给 expanded-row-render 设置具体的属性值,比如属性值为 object 表示可以通过对象来配置展开的行。 3. 最后,在 table 中添加一个事件监听函数,用来处理展开行功能的具体逻辑。例如: ```html <a-table :columns="columns" :data-source="data" :pagination="false" :expanded-row-render="true" @expandedRowsChange="onExpandedRowsChange"></a-table> ``` 在 onExpandedRowsChange 函数中,我们可以进行一些表格展开和关闭的操作,例如: ```javascript methods: { onExpandedRowsChange(rows) { if (rows.length == 0) { // 关闭所有行 return; } console.log('展开行:', rows[0]); } } ``` 需要注意的是,由于 expandedRowRender 的值为 true,表示允许展开行,所以属性 @expandedRowsChange 才会生效,才能实现展开行的效果。 通过以上三个步骤,我们就可以实现vue antd table一格加多行的效果了。当然,具体实现方式还要根据自己的实际情况来进行调整,如果你还有其他更好的实现方式,欢迎在评论中分享给大家。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值