【VUE项目实战】23、改造状态列的显示效果

接上篇《​​22、获取用户列表数据并渲染​​》 上一篇我们绘制了用户列表样式，并获取用户列表数据进行展示。本篇我们来实现状态列的显示效果以及插槽形式定义操作列的渲染。

我们看用户列表的效果图：

可以看到状态列是有一个开关类型的图标，其中可用的状态是蓝色旋钮向右，不可用状态是灰色旋钮向左。我们根据获取到的用户的state状态，来实现这种状态显示效果。

 当前的状态列为“mg_state”:

该列的数据是一个Boolean类型的值，要么是true，要么是false：

Boolean类型的值是没有办法在页面上直接渲染出来的，我们希望吧Boolean值渲染为上面的开关效果，如果mg_state值是true，开关是打开状态，如果是false，开关是关闭状态。

如何把Boolean值按需渲染成开关呢？此时我们用到的是作用域卡槽，我们将状态列的“el-table-column”标签中，添加“template”标签，并为其添加一个“slot-scope”属性，值为“scope”，此时改列渲染的值就会绑定在一个叫“scope”的对象上，其“row”属性就是改列绑定的数据：

我们刷新页面看看row值是什么：

注：关于插槽和作用域插槽（slot）的基础知识，请查看该博文：​​【深入理解vue中的slot与slot-scope】

 我们可以看到，利用作用域插槽绑定的对象，可以获取当前数据列的数据对象，我们就可以通过“scope.row.mg_state”获取到状态数据。

对于开关的样式，我们可以通过Element-UI为我们提供的“Switch开关”组件来实现：

这里v-model我们就可以绑定mg_state字段，代码如下：

注：别忘记在element.js注册“Switch”组件。

效果：

这样就显示了相应的state状态（两个都是true，后面我们修改一个数据为false就可以看到另一个状态）。

我们下面使用插槽式定义操作列的效果：

为什么使用自定义插槽？因为只有这一列存在数据，且存在id，我们的修改、删除操作都需要id，也就是要根据不同行的数据来进行不同id的操作，没有id就不显示修改、删除操作按钮。

我们找到操作列，写一个template插槽，并绑定scope（先指定个“{}”空对象，看看按钮效果，不然会报错），在其中设置三个按钮，type不一样，icon图标也不一样，大小都是“mini”最小状态：

效果：

可能一开始使用系统的用户并不知道按钮是干嘛的，我们需要让鼠标放在按钮上面会显示按钮的名称，此时需要使用“Tooltip文字提示”组件（这里使用上边显示的提示组件即可）：

注：别忘记在element.js注册“Tooltip”组件。

效果：

可以看到当鼠标放在哪个按钮上，哪个按钮就显示提示文字。

以上就是状态列和操作列的显示效果开发。 下一篇我们来实现分页效果。

参考：黑马程序员Vue项目实战教学视频