使用solidity与web3创作一个在线小游戏之五：VUE中的嵌套table，动态数据绑定，slot插槽与slot-scope

lixiaodog

已于 2022-04-25 15:05:41 修改

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 智能合约区块链文章标签： vue.js 智能合约 javascript

于 2022-04-25 13:05:23 首次发布

本文链接：https://blog.youkuaiyun.com/lixiaodog/article/details/124396568

本文档讲述了如何在Vue.js项目中创建一个动态表格，该表格包含嵌套表格并实现了数据绑定。通过使用slot和slot-scope属性，实现了上下级表格间的数据交互。还展示了如何通过动态绑定函数过滤表格数据，并通过drawer组件添加和修改数据。在完成这些功能后，为后续创建详情页面奠定了基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在本系列的上一篇文章

使用solidity与web3创作一个在线小游戏之四：基于VUE的DAPP，与智能合约的交互_lixiaodog的博客-优快云博客_vue智能合约中我们实现了一个Login页面，在这一章中，我们将实现HOME页面，在其中生成一个动态表格，表格中再嵌套表格，并实现动态的数据绑定。同时还将增加一个drawer来添加数据。

在VIEW文件夹下添加一个文件home.vue，由于代码较多，以下所有代码引用均为关键片段

实现嵌套表格的代码如下：

      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="tableData"
      >
        <template
          slot-scope="{row, index}"
          slot="action"
        >
          <Button
            style="margin-right: 10px"
            @click="addRoom(row, index)"
          >添加房间</Button>

         
        </template>
        <template
          slot-scope="{ row, index }"
          slot="roominfo"
        >
          <Table
            :loading="loading"
            border
            :columns="roomcolumns"
            :data="getRoomList(row)"
          >
            <template
              slot-scope="{row, index}"
              slot="addoption"
            >
              <Button
                style="margin-