系列文章目录
Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
Vue提高篇一：使用Vuex进行状态管理
Vue提高篇二：使用vue-router实现静态路由
Vue提高篇三：使用vue-router实现动态路由
Vue提高篇四：使用Element UI组件库
Vue提高篇五：使用Jest进行单元测试
Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一： 使用Vue搭建注册登录界面
Vue实战篇二： 实现邮件验证码发送
Vue实战篇三：实现用户注册
Vue实战篇四：创建多步骤表单
Vue实战篇五：实现文件上传
Vue实战篇六：表格渲染动态数据
Vue实战篇七：表单校验
Vue实战篇八：实现弹出对话框进行交互
Vue实战篇九：使用省市区级联选择插件
Vue实战篇十：响应式布局
Vue实战篇十一：父组件获取子组件数据的常规方法
Vue实战篇十二：多项选择器的实际运用
Vue实战篇十三：实战分页组件
Vue实战篇十四：前端excel组件实现数据导入
Vue实战篇十五：表格数据多选在实际项目中的技巧
Vue实战篇十六：导航菜单
Vue实战篇十七：用树型组件实现一个知识目录
Vue实战篇十八：搭建一个知识库框架
Vue实战篇十九：使用printjs打印表单
Vue实战篇二十：自定义表格合计
Vue实战篇二十一：实战Prop的双向绑定
Vue实战篇二十二：生成二维码
一、背景
- 在前端显示页面中，我们有时候喜欢用卡片风格，比如说这样的：
- 有时候喜欢用列表风格，比如说这样的：
- 但我们更喜欢把两种风格结合在一起，在同一个页面实现这两种风格的自由切换。
二、卡片风格
- 将角色信息通过el-card来渲染出卡片风格的页面
<!-- 卡片风格 -->
<el-row>
<el-col
v-for="item in roles"
:key="item.id"
:span="5"
style="margin-bottom: 10px"
:offset="1"
>
<el-card>
<div slot="header" class="clearfix">
<i class="el-icon-user" /><span style="margin-left: 5px">{
{
item.roleName
}}</span>
<div
style="display: inline-block; float: right; cursor: pointer"
@click="doEdit(item.id)"
>
<el-tooltip effect="dark" content="编辑角色" placement="top">
<i class="el-icon-edit-outline" style="margin-left: 15px" />
</el-tooltip>
</div>
</div>
<div>
<ul class="role-info">
<li>
<div class="role-left">描述信息：{
{ item.description }}</div>
</li>
<li>
<div class="role-left">
创建时间：{
{ parseTime(item.createTime) }}
</div>
</li>
</ul>
</div>
<div
style="display: inline-block; float: left; cursor: pointer"
@click="doAssignPemission(item.id, item.roleName)"
>
<el-tooltip effect="dark" content="权限分配" placement="bottom">
<i class="el-icon-menu" />
</el-tooltip>
</div>
<div
style="display: inline-block; float: right; cursor: pointer"
@click="doDelete(item.id)"
>
<el-tooltip effect="dark" content="删除角色" placement="bottom">
<i class="el-icon-delete" style="margin-left: 15px" />
</el-tooltip>
</div>
</el-card>
</el-col>
</el-row>
<script>
export default {
name: '角色管理',
data() {
return {
// 角色列表
roles: [],
...
}
},
...
</script>
三、列表风格
- 将角色信息通过el-table来渲染出列表风格的页面
<!-- 列表风格 -->
<el-table
v-else
ref="table"
:data="roles"
style="width: 100%; font-size: 12px"
@selection-change="selectionChangeHandler"
>
<el-table-column
:show-overflow-tooltip="true"
width="150"
prop="roleName"
label="角色名称"
/>
<el-table-column
:show-overflow-tooltip="true"
prop="createTime"
width="155"
label="创建时间"
>
<template slot-scope="scope">
<span>{
{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="description" label="描述信息" />
<el-table-column label="操作" width="300" align="center" fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
round
@click="doEdit(scope.row.id)"
>编辑角色</el-button>
<el-button
size="mini"
type="text"
round
@click="doDelete(scope.row.id)"
>删除角色</el-button>
<el-button
size="mini"
type="text"
round
@click="doAssignPemission(scope.row.id,scope.row.roleName)"
>分配权限</el-button>
</template>
</el-table-column>
</el-table>
<script>
export default {
name: '角色管理',
data() {
return {
// 角色列表
roles: [],
...
}
},
...
</script>
四、实现两种风格的切换
- 增加一个切换按钮，并增加cardType变量，为true时显示卡片风格，为false时显示列表风格，用户点击此按钮可自由切换两种风格
<el-button-group class="card-toggle-table">
<el-tooltip
v-if="cardType"
class="item"
effect="dark"
content="切换成表格"
placement="top-start"
>
<el-button size="mini" plain icon="el-icon-s-grid" @click="toggle" />
</el-tooltip>
<el-tooltip
v-else
class="item"
effect="dark"
content="切换成卡片"
placement="top-start"
>
<el-button
size="mini"
plain
icon="el-icon-bank-card"
@click="toggle"
/>
</el-tooltip>
</el-button-group>
<script>
export default {
name: '角色管理',
data() {
return {
// 默认为卡片风格，为false时切换成列表风格
cardType: true,
...
}
},
...
methods: {
// 点击切换风格
toggle() {
this.cardType = !this.cardType
}
...
}
</script>
- 在两种显示风格上加上v-if与v-else判断
<!-- 如果cardType为true,则显示卡片风格 -->
<el-row v-if="cardType">
<el-col
v-for="item in roles"
:key="item.id"
:span="5"
style="margin-bottom: 10px"
:offset="1"
>
<el-card>
<div slot="header" class="clearfix">
<i class="el-icon-user" /><span style="margin-left: 5px">{
{
item.roleName
}}</span>
<div
style="display: inline-block; float: right; cursor: pointer"
@click="doEdit(item.id)"
>
<el-tooltip effect="dark" content="编辑角色" placement="top">
<i class="el-icon-edit-outline" style="margin-left: 15px" />
</el-tooltip>
</div>
</div>
<div>
<ul class="role-info">
<li>
<div class="role-left">描述信息：{
{ item.description }}</div>
</li>
<li>
<div class="role-left">
创建时间：{
{ parseTime(item.createTime) }}
</div>
</li>
</ul>
</div>
<div
style="display: inline-block; float: left; cursor: pointer"
@click="doAssignPemission(item.id, item.roleName)"
>
<el-tooltip effect="dark" content="权限分配" placement="bottom">
<i class="el-icon-menu" />
</el-tooltip>
</div>
<div
style="display: inline-block; float: right; cursor: pointer"
@click="doDelete(item.id)"
>
<el-tooltip effect="dark" content="删除角色" placement="bottom">
<i class="el-icon-delete" style="margin-left: 15px" />
</el-tooltip>
</div>
</el-card>
</el-col>
</el-row>
<!-- 如果cardType为false则显示列表风格 -->
<el-table
v-else
ref="table"
:data="roles"
style="width: 100%; font-size: 12px"
@selection-change="selectionChangeHandler"
>
<el-table-column
:show-overflow-tooltip="true"
width="150"
prop="roleName"
label="角色名称"
/>
<el-table-column
:show-overflow-tooltip="true"
prop="createTime"
width="155"
label="创建时间"
>
<template slot-scope="scope">
<span>{
{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="description" label="描述信息" />
<el-table-column label="操作" width="300" align="center" fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
round
@click="doEdit(scope.row.id)"
>编辑角色</el-button>
<el-button
size="mini"
type="text"
round
@click="doDelete(scope.row.id)"
>删除角色</el-button>
<el-button
size="mini"
type="text"
round
@click="doAssignPemission(scope.row.id,scope.row.roleName)"
>分配权限</el-button>
</template>
</el-table-column>
</el-table>
五、效果演示
