模板是来源于官方文档
清除tabledata里的模拟数据先
<el-table :data="tableData" >
//label 是名字每一列的名字 prop是通过哪个tableData中哪个字段来渲染
<el-table-column prop='username' label="姓名"></el-table-column>
<el-table-column prop="password" label="密码"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column label="状态">
//这里不同需要判断一下状态
<template clot-scope="scope">
//scopr.row.state 表示这一行的state是如何的
<el-tag type="success" effect="dark" v-if="scope.row.state==1">在线</el-tag>
<el-tag type="warning" effect="dark" v-if="scope.row.state==2">离线</el-tag>
</template>
</el-table-column>
//:formatter="dateFormat"是格式化后端返回来的时间戳，有固定的方法 需要下载moment 可以自行了解
<el-table-column prop="createTime" :formatter="dateFormat" label="创建时间></el-table-column>
<el-table-column prop="updateTime" :formatter="dateFormat" label="更新时间"></el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<!-- 点击编辑进入编辑页面进行编辑表格数据 -->
//(scope.$index, scope.row)我的个人理解就是，点击这一行，可以通过这两个scope.$index返回返回这一行的id scope.row表示这一行
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit-outline">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
//这里是分页组件 直接用element官方文档的就行
<diav class="el-pagination">
<el-pagination
@size-change="handleSizeChange" //pageSize改变时会触发这个
@current-change="handleCurrentChange" // currentPage改变会触发 (当前页)
:current-page="currentPage" //当前页数
:page-sizes="[5,10, 20, 300, 400,9999]" //每页显示个数先择去哦的选项设置
:page-size=pageSize //每页显示的条数
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount"> //总页数
</el-pagination>
</div>
//用户更新的弹窗
<el-dialog title="用户跟新" :visible.sync="dialogFromVisible">
<el-form :model="form">
<el-form-item label="用户名" :label-width="formLabelWidth">
<el-input v-model="form.username" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码" :label-width="formLabelWidth">
<el-input v-model="form.password" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="邮箱" :label-width="formLabelWidth">
<el-input v-model="form.email" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="add1">确定</el-button>
</div>
</el-dialog>
//用户列表新增的弹窗
<el-dialog title="用户列表新增" :visible.sync="dialogFormVisible2">
<!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
<el-form :model="form2">
<el-form-item label="用户名" :label-width="formLabelWidth">
<el-input v-model="form2.username" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码" :label-width="formLabelWidth">
<el-input v-model="form2.password" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="邮箱" :label-width="formLabelWidth">
<el-input v-model="form2.email" auto-complete="off"></el-input>
</el-form-item>
<!-- <el-form-item label="邮箱" :label-width="formLabelWidth">
<el-input v-model="form2.email" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="邮箱" :label-width="formLabelWidth">
<el-input v-model="form2.email" auto-complete="off"></el-input>
</el-form-item> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<!-- 设置触发新增的方法 -->
<el-button type="primary" @click="add3">确 定</el-button>
</div>
</el-dialog>
//页面结构大致如此
script内容
<script>
// 引入封装好的接口
import { adduser,updateuser,selectpage,deleteuser } from '@/api/basisMG';
import moment from 'moment' //还记得这个吗，这个就是格式化时间戳的
export default {
data(){
return{
//分页组件相关的变量
currentPage ：1，当前页数
totalCount：0， 总条数
pageSize：10 每页总条数
//用户新增使用
formuseradd{
//这里就是看接口文档或者postman上，需要携带什么body去访问
username:'',
password:'',
emile: ''
}
//用户删除时使用
paramsuuid{
"uuid"：''
}
formupdate{
username: '',
password: '',
emile: ''
}
//用户更新时使用
}
}，
method:{
//还记得上面的分页组件的绑定的事件吗
handleSizeChange(val){
this.pageSize = val
this.currentPage = 1
this.queryList()
},
handleCurrentChange(val){
this.currentPage = val
this.queryList()
},
//搜索查询方法
selectpage(this.pageSize,this.currentPage,this.username).then(res =>[
this.tableDate = res.data.data.records
this.totalCOunt = res.data.data.total
})
//查询用户user 列表
queryList(){
selectpage(this.pageSize,this.currentPage,this.username).then(res => {
console.log('接口返回的用户列表=='+JSON.stringify(res))
//首先要清楚，是把数据从接口拿到哪里，我这里是tabelData里
this.tableData = res.data.data.records //返回的用户列表字段赋给tableData，让他渲染上，
this.totalCount = res.data.data.total //总条数
})
},
//用户新增
首先要有一个新增的按钮，点击按钮，触发弹出弹窗，弹窗中是一个form表单，里面有确认按钮，用来绑定方法，调用接口实现用户更新
例如有一个<el-button @click="addusre">新增<el-button>
adduser(){
// 弹窗一开始都是隐藏的
this.dialogFormVisible2 = true
}
//弹窗中也有一个按钮此处叫为应用
apply(){
//调用新增用户接口
//因为新增是post请求需要往接口里面传数据
adduer(this.formuseradd){
console.log('新增接口返回了什么')
if(res.data.code === 200){
this.$message('新增成功')
}else{
this.$message(''失败)
}
}，
//新增完成后自然最容易想到的就是删除
此删除是在el-table-column中一列的操作
例如<el-button size="mini" type="danger" @click='handleDelete(scope.$index,scope.row)'>删除</el-button>
绑定了点击事件
handleDelete(index row){
this.$confirm("是否确认"){
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
)}.then(() =>{
//移除对应位置的索引，通过索引移除每一行的数据
通过接口的返回每一行的索引是uuid
this.paramsuuid.uuid = row.uuid
deleteuser(this.params).then(res =>{
console.log('删除之后返回的数据'+JSON.stringify(res))
if(res.data.code==200){//判断返回之后的code,如果是200表示成功,提示删除成功
this.$message({
type: "success",
message: "删除成功!"
});
}else{
this.$message({
type: "info",
message: "删除失败!"
});
}
//这里就是删除的话把uuid传给接口，接口会自行删除
})
})
}，
//删除和新增都有了，下一步就是更新
更新的话就是跟着删除在一个格子里
<el-button size="mini" @click="handleEdit(scope.$index,scope.row)">
handleEdit(index,row){
this.uuid =row.uuid //确认修改的行
// 将数据的index传递过来用于实现数据的回显
this.form = this.tableData[index]
this.currentIndex = index
this.dialogFormVisible = true
},
<el-button @click="Updateuser">更新<el-button>
Updateuser{
updateuser(this.form).then(res => {
console.log("更新返回===" + JSON.stringify(res))
})
this.dialogFormVisible =false
},
// 时间戳转换
dateFormat(row,colum) {
var date = row[column.property]
if(date == undefined) [
return ""
}
return moment(date).format("YYYY-MM-DD HH:mm:ss")
}，
}
}
</script>
4497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
