在本系列的上一篇文章
使用solidity与web3创作一个在线小游戏之四：基于VUE的DAPP，与智能合约的交互_lixiaodog的博客-CSDN博客_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-right: 10px"
@click="addDesk(row, index)"
>添加桌子</Button>
</template>
<template
slot-scope="{row, index}"
slot="editoption"
>
<Button
style="margin-right: 10px"
@click="editRoom(row, index)"
>修改房间</Button>
</template>
</Table>
</template>
</Table>在此处使用slot属性与上级表格的表头关联：
表头数据如下：
{
title: "游戏房间列表",
width: 1000,
slot: "roominfo",
align: "center"
},此时，此列已经与下级表格关联好了，那数据怎样处理呢？如果我们要在里面添加一个表格那么下级表格一定有访问上级表格数据的要求，这时要用slot-scope属性来分发数据，如下：
此时下级表格可以引用上组表格的数据：
为了实现表格数据的过滤，在这里我们使用了动态绑定的办法，声明一个函数，由函数动态返回表格的具体数据。此时多级表格已经基本实现。界面如下：
接下来我们创建一个drawer组件页面来为我们添加数据，在components文件夹下，创建一个room.vue的文件，在这个组件里我们会完成对room数据 的增加和修改，在room组件的属性里添加一个属性：
export default {
name: "room",
props: ["roomInfo"],
data() {
这个字段将在HOME.VUE里被设置。完整的模板代码如下：
<template>
<Drawer
:title="roomInfo.title"
v-model="roomInfo.isShow"
width="600"
:styles="styles"
:mask-closable="false"
>
<Form
:model="roomInfo"
ref="roomInfo"
:rules="ruleRoomValidate"
>
<Row :gutter="32">
<Col span="24">
<FormItem
label="房间编号"
prop="name"
label-position="top"
>
<Input
v-model="roomInfo.name"
placeholder="请房间游戏编号"
/>
</FormItem>
</Col>
</Row>
<Row :gutter="32">
<Col span="24">
<FormItem
label="房间名称"
prop="symbol"
label-position="top"
>
<Input
v-model="roomInfo.symbol"
placeholder="请输入房间名称"
/>
</FormItem>
</Col>
</Row>
<Row :gutter="32">
<Col span="24">
<FormItem
label="所属游戏"
prop="gameName"
label-position="top"
>
<Input
v-model="roomInfo.gameName"
placeholder="请输入所属游戏"
:disabled='true'
/>
</FormItem>
</Col>
</Row>
<Row :gutter="32">
<Col span="24">
<FormItem
label="底分"
prop="basePoint"
label-position="top"
>
<Input
v-model="roomInfo.basePoint"
placeholder="请输入房间底分"
/>
</FormItem>
</Col>
</Row>
<Row :gutter="32">
<Col span="24">
<FormItem
label="最高分"
prop="maxPoint"
label-position="top"
>
<Input
v-model="roomInfo.maxPoint"
placeholder="请输入房间最高分"
/>
</FormItem>
</Col>
</Row>
<Row :gutter="32">
<Col span="24">
<FormItem
label="收费模式"
prop="feeType"
label-position="top"
>
<select
v-model="roomInfo.feeType"
placeholder="请输入收费模式"
>
<option v-for="x in feeType">{
{x.name}}</option>
</select>
<!--<Input v-model="roomInfo.feeType" placeholder="请输入收费模式" />-->
</FormItem>
</Col>
</Row>
</Form>
<div class="demo-drawer-footer">
<Button
type="primary"
style="margin-right: 15px"
@click="handleSubmit('roomInfo')"
>{
{ textBtn }}</Button>
<Button
@click="handleReset('roomInfo')"
style="margin-right: 15px"
>重置</Button>
<Button
type="error"
ghost
@click="roomInfo.isShow = false"
>退出</Button>
</div>
</Drawer>
</template>我们相应的响应函数加上代码后，单击home.vue里的添加房间按钮，将展示如下界面：
本章简单介绍了一VUE.JS的基本运用，在下一章中，我们将继续使用vue.js创建一个详情页面。敬请期待