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

Posted 2022-01-03 光仔December

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

一、状态列的显示效果

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

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

 当前的状态列为“mg_state”:

<el-table-column label="状态" prop="mg_state"></el-table-column>

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

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

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

<el-table-column label="状态" prop="mg_state">
  <template slot-scope="scope">
      scope.row
  </template>
</el-table-column>

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

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

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

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

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

<el-table-column label="状态" prop="mg_state">
    <template slot-scope="scope">
        <el-switch v-model="scope.row.mg_state"
        active-color="#13ce66"
        inactive-color="#ff4949">
        </el-switch>
    </template>
</el-table-column>

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

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

二、插槽形式定义列的渲染

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

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

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

<el-table-column label="操作" width="200px">
    <template slot-scope="">
        <!-- 放置修改、删除和分配角色按钮 -->
        <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
        <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
    </template>
</el-table-column>

效果：

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

<el-table-column label="操作" width="200px">
    <template slot-scope="">
        <!-- 放置修改、删除和分配角色按钮 -->
        <el-tooltip effect="dark" content="修改" placement="top">
        <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="删除" placement="top">
        <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="分配角色" placement="top">
        <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
        </el-tooltip>
    </template>
</el-table-column>

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

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

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

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/u013517797/article/details/121874197