一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第26天，点击查看活动详情

三级联动组件

注册全局组件

三级联动组件并不是只在一个地方出现，因此，把三级联动组件设置为全局组件更方便，首先在components文件夹下新建CategorySelect文件夹，然后新建index.vue。

在这里插入图片描述

接下来在main.js中注册全局组件。

在这里插入图片描述

找到elementUI的Form表单的行内表单，进行修改，具体修改如下所示。

在这里插入图片描述

接下来将死数据换为真实数据，首先书写接口。

在这里插入图片描述

接下来在三级联动组件中发送请求以及存储数据，首先，当三个选择框进行选择时，给他们绑定事件。

在这里插入图片描述

接下来书写事件逻辑，以及存储数据到组件的data中

在这里插入图片描述

此时三级联动组件书写完成。

首先利用两个el-card进行布局

在这里插入图片描述

然后在第一个el-card中使用三级联动组件。在第二个el-card中添加el-button与el-table，此时页面静态效果完成

首先书写接口

在这里插入图片描述

通过接口可以发现，需要三个参数，而这三个参数并没有在Attr组件中，而在其子组件三级联动组件中，因此可以利用自定义事件完成子对父传数据，同时为了区分传过来的数据是几级数据，可以再设定一个参数Level用来区分等级。绑定自定义事件如下所示。

在这里插入图片描述

子组件给父组件传输数据如下所示。

在这里插入图片描述

父组件接收数据并发送请求

在这里插入图片描述

获取数据后，动态渲染el-table表格

在这里插入图片描述

此时动态展示属性效果完成