elementUi编写表格样式及分页组件
<template><div class="container"><div class="app-container"><!--角色管理内容--><div class="role-operate"><el-button type="primary">添加角色</el-button></div><el-table><!--放置列--><el-table-column align="center" width="200" label="角色" /><el-table-column align="center" width="200" label="启用" /><el-table-column align="center" label="描述" /><el-table-column align="center" label="操作" /></el-table><!--分页组件外层--><el-row type="flex" style="height:60px" align="middle" justify="end"><!--放置分页组件--><el-paginationlayout="prev,pager,next"/></el-row></div></div>
</template>
<script>
export default {name: 'Role'
}
</script>
<style scoped>
.role-operate{
padding:10px;
}
</style>
获取数据
1.api/role.js里封装接口
import request from '@/utils/request'// 获取角色列表
export function getRoleList(params) {return request({// 有地址参数，要拼接到地址上url: '/sys/role',// data是请求体参数// params是查询参数，要拼接到地址上params })
}2.views/ index.vue里封装一个同名方法
methods: {// 定义了与 getRoleList同名的方法async getRoleList() {const { rows } = await getRoleList()this.list = rows}}3.created里调用上面封装的方法
created() {// 调用下面定义的方法this.getRoleList()}4.先声明一个list
data() {return {list: []}}5.给表格绑定数据
<el-table :data="list"><!--放置列--><el-table-column align="center" prop="name" width="200" label="角色" /><el-table-column align="center" prop="state" width="200" label="启用" /><el-table-column align="center" prop="description" label="描述" /><el-table-column align="center" label="操作" /></el-table><!--分页组件外层6.插槽使用（插槽使用必须要有template,双花括号，这里的row需要解构）
<template v-slot="{row}">{{ row.state }}</template>7.表格列自定义
<el-table :data="list"><!--放置列--><el-table-column align="center" prop="name" width="200" label="角色" /><el-table-column align="center" prop="state" width="200" label="启用" /><!--自定义列结构--><template v-slot="{row}">{{ row.state === 1?'已启用':row.state === 0?"未启用" :'无' }}</template><el-table-column align="center" prop="description" label="描述" /><el-table-column align="center" label="操作" /><!--放置操作按钮--><template><el-button size="mini" type="text">分配权限</el-button><el-button size="mini" type="text">编辑</el-button><el-button size="mini" type="text">删除</el-button></template></el-table>分页功能
1.先把分页信息存储到一个对象中
data() {return {list: [],// 将分页信息放到一个对象中pageParams: {page: 1, // 第几页pagesize: 5, // 每页多少条total: 0}}}2.把准备好的数据绑定到分页组件
<!--分页组件外层--><el-row type="flex" style="height:60px" align="middle" justify="end"><!--放置分页组件--><el-pagination:page-size="pageParams.pagesize":page="pageParams.size":total="pageParams.total"layout="prev,pager,next"@current-change="changePage"/></el-row>3.用方法获取数据
methods: {// 定义了与 getRoleList同名的方法async getRoleList() {const { rows, total } = await getRoleList(this.pageParams)this.list = rowsthis.pageParams.total = total},changePage(newPage) {this.pageParams.page = newPagethis.getRoleList()}}
}添加角色弹出层
data() {return {showDialog: false,list: [],// 将分页信息放到一个对象中pageParams: {page: 1, // 第几页pagesize: 5, // 每页多少条total: 0}}}, <el-button type="primary" @click="showDialog = true">添加角色</el-button>注意 :visible.sync="showDialog" 要加sync
<!--放置弹层--><el-dialogwidth="500px"title="新增角色":visible.sync="showDialog"/><!--表单内容-->添加角色-表单校验
提供数据(数据要和接口文档对应)
roleForm: {name: '',description: '',state: 0}注：这里用了switch，需要设置“:active-value=1” “:inactive-value=0”
角色管理中新增角色的确定和取消
编辑角色
1.行内编辑
遍历每一项，增加isEdit变量
methods: {// 定义了与 getRoleList同名的方法async getRoleList() {const { rows, total } = await getRoleList(this.pageParams)this.list = rowsthis.pageParams.total = totalthis.list.forEach(item => {item.isEdit = false})}使用v-if判断渲染什么内容
<el-table-column align="center" prop="name" width="200" label="角色"><template v-slot="{row}"><!--条件判断是渲染名称还是渲染一个输入框--><em-input v-if="row.isEdit" size="mini" /></template></el-table-column>注：添加的isEdit不具有响应式，所以这里使用了$set方法，添加一个响应式数据
this.$set(目标对象，属性名称，初始值）可以针对目标对象 添加的属性 添加响应式
this.list.forEach(item => {this.$set(item, 'isEdit', false)})实现当点击编辑时，变为编辑状态：设定一个变量，点击编辑时，这个变量就改变，利用插槽和v-if实现样式变幻
<template v-slot="{row}"><template v-if="row.isEdit"><el-button type="primary" size="mini">确定</el-button><el-button type="primary" size="mini">取消</el-button><!--编辑状态--></template><template v-else><el-button size="mini" type="text">分配权限</el-button><el-button size="mini" type="text" @click="btnEditRow(row)">编辑</el-button><el-button size="mini" type="text">删除</el-button></template></template></el-table>
添加响应式属性
行内编辑数据缓存
1.初始化时定义缓存数据
methods: {// 定义了与 getRoleList同名的方法async getRoleList() {const { rows, total } = await getRoleList(this.pageParams)this.list = rowsthis.pageParams.total = totalthis.list.forEach(item => {this.$set(item, 'isEdit', false)this.$set(item, 'editRow', {name: item.name,description: item.description,state: item.state})})}2。数据绑定表单（注意：绑定的是设置的缓存里的数据）
<template v-slot="{row}"><el-switch v-if="row.isEdit" v-model="roe.isEdit.state" active-value="1" inactive-value="0" />{{ row.state === 1?'已启用':row.state === 0?"未启用" :'无' }}</template><template v-slot="{row}"><!--条件判断是渲染名称还是渲染一个输入框--><em-input v-if="row.isEdit" v-model="roe.isEdit.input" size="mini" /></template><template v-slot="{row}"><el-input v-if="row.isEdit" v-model="roe.isEdit.description" type="textarea" /><span v-else>="{{ row.description }}"</span></template>3.更新缓存数据
btnEditRow(row) {row.isEdit = true// 改变行的编辑状态row.editRow.name = row.namerow.editRow.state = row.staterow.editRow.description = row.description}角色管理的确定和取消
确定的代码逻辑
async btnEditOk(row) {if (row.editRow.name && row.editRow.description) {await updateRole({ ...row.editRow, id: row.id })this.$message.success('success')Object.assign(row, {...row.assign(row, {...row.editRow,isEdit: false})})} else {this.$message.warning('不能为空')}} }}取消的代码逻辑
@click="roe.isEdit = false"删除功能
添加气泡确认框（记得用插槽和根据文档添加事件）
<el-popconfirmtitle="Are you sure to delete this?"@OnConfirm="confirmDel(row.id)"><el-button slot="reference" size="mini" type="text">删除</el-button></el-popconfirm>封装删除角色的接口
// 删除角色
export function delRole(id) {return request({url: `/sys/role/${id}`,method: 'delete'})
}删除的逻辑
async confirmDel(id) {// 调用接口await delRole(id)this.$message.success('删除角色成功')// 删除的如果是最后一个if (this.list.length === 1) {this.pageParams.page--this.getRoleList()}} 
