scope.row获取该行数据
设置按钮(颜色 样式)
<!-- 为了让一行可以放下3个按钮width -->
<el-table-column label="操作" width="180px">
<!-- 作用域插槽 -->
<template slot-scope="scope">
<!-- scope.row将拿到的数据渲染 -->
<!-- 修改按钮 -->
<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>
将最后一个按钮添加提示 且为了移开按钮的时候也需要隐藏提示框enterable
<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting"
size="mini"></el-button>
</el-tooltip>
<template>
<div>
<!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区域 -->
<el-card class="box-card">
<!-- 搜索和添加区域 -->
<el-row :gutter="20">
<el-col :span="7">
<div>
<el-input placeholder="请输入内容">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
</el-col>
<el-col :span="4">
<el-button type="primary">添加用户</el-button>
</el-col>
</el-row>
<!-- 用户列表区域 -->
<!-- data指定数据源 stripe斑马 border边框-->
<el-table border :data="userList" stripe>
<!-- 索引列 -->
<el-table-column type="index" label="#"></el-table-column>
<!-- prop是data数组中的数据 -->
<el-table-column label="姓名" prop="username"> </el-table-column>
<el-table-column label="邮箱" prop="email"> </el-table-column>
<el-table-column label="电话" prop="mobile"> </el-table-column>
<el-table-column label="角色" prop="role_name"> </el-table-column>
<el-table-column label="状态">
<!-- 作用域插槽 slot-scope获取子组件的slot引用scope引用变量名 具有所有sloat属性 作用域插槽会覆盖prop -->
<template slot-scope="scope">
<!-- 将拿到的数据渲染 -->
<el-switch
v-model=scope.row.mg_state>
</el-switch>
</template>
</el-table-column>
<!-- 为了让一行可以放下3个按钮width -->
<el-table-column label="操作" width="180px">
<!-- 作用域插槽 -->
<template slot-scope="scope">
<!-- scope.row将拿到的数据渲染 -->
<!-- 修改按钮 -->
<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-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting"
size="mini"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
export default{
data() {
return {
// 获取用户列表的参数
queryInfo:{
query:'',//查询参数 可以为空
pagenum:1,//当前页码 不能为空
pagesize:2// 每页显示条数 不能为空
},
userList:[],//所有数据列表
toatl:0//总数据条数
}
},
created() {
//在创建的时候获取用户列表数据 调用函数
this.getUserList()
},
methods: {
async getUserList(){
//get请求-写在data中
const{data:res}= await this.$http.get('users',{params:this.queryInfo})
//console.log(res)//测试
if(res.meta.status!==200) return this.$message.error('获取用户列表数据失败')
this.userList=res.data.users
this.total=res.data.total
}
},
}
</script>
<style lang="less" scoped>
</style>