|
html 代码
<div class="goods">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
</el-breadcrumb>
<template>
<div class="seach">
<el-row>
<el-col :span="6">
<label>搜索:</label>
<el-input clearable v-model="search" placeholder="用户名"style="width:200px;"></el-input>
</el-col>
<el-col :span="6">
<el-button type="primary" icon="el-icon-plus" @click="addUser">添加</el-button>
</el-col>
</el-row>
</div>
</template>
<div class="content">
<!-- <div>{{tableData}}</div> -->
<div>{{tables.length}}</div>
<el-table
:data="tables.slice((currentPage-1)*pageSize,currentPage*pageSize)"//将获取到的数据进行截取并且分页显示
style="width: 100%">
<el-table-column
prop="name"
label="用户名"
width="180">
</el-table-column>
<el-table-column
prop="password"
label="密码"
width="180">
</el-table-column>
<el-table-column
prop="phone"
label="手机号码"
width="180">
</el-table-column>
<el-table-column
prop="email"
label="邮箱"
width="180">
</el-table-column>
<el-table-column
label="状态"
prop="status"
>
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
:active-value="1"
:inactive-value="2"
@change="changeStatus(scope.row.id,$event)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column
label="操作"
width="180">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="editUser(scope.$index,scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="delUser(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
分页功能
<script>
export default{
data(){
return{
tableData:[],//全部数据
currentPage:1,//当前在几页
pageSize:2,//每页显示多少条数据
total:10,//总条数
}
},
methods:{
getUserList(){
var url = 'static/db.json';
this.$http.get(url).then((res)=>{
if(res.status!==200) return this.$message.error("请求数据失败");
this.$message.success("请求数据成功");
this.tableData = res.data.userList
// console.log(res.data.userList)
})
},
// 当每页数据条数发生改变的时候触发
handleSizeChange(val){
// console.log(val)
this.currentPage = 1;
this.pageSize = val;
this.getUserList();
},
// 当页码发生改变时触发
handleCurrentChange(val){
// console.log(val)
this.currentPage = val;
this.getUserList();
},
},
created(){//加载列表数据
this.getUserList();
}
}
</script>
增加数据 给添加按钮 添加addUser事件
<!-- 添加用户 -->
<el-dialog
title="添加用户"
:visible.sync="addUserVisible"
width="30%"
>
<el-form :model="addUserForm" :rules="addUserFormRul" ref="addUserFormRef" label-width="100px" class="demo-ruleForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="addUserForm.name" clearable></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addUserForm.password" clearable></el-input>
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="addUserForm.phone" clearable></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addUserForm.email" clearable></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addUserVisible = false">取 消</el-button>
<el-button type="primary" @click="sumbitAddUser">确 定</el-button>
</span>
</el-dialog>
<script>
export default{
data(){
// 验证邮箱的校验规则
var checkEmail = (rule, value, callback) => {
// 验证邮箱的正则表达式
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
if (regEmail.test(value)) {
// 验证通过，合法的邮箱
return callback()
}
// 验证不通过，不合法
callback(new Error('请输入合法的邮箱'))
}
// 验证手机号的验证规则
var checkPhone = (rule, value, callback) => {
// 验证手机号的正则表达式
const regPhone = /^1[3|4|5|7|8][0-9]{9}$/
if (regPhone.test(value)) {
// 验证通过，合法的手机号
return callback()
}
// 验证不通过，不合法
callback(new Error('请输入合法的手机号'))
}
return{
addUserVisible:false,//添加用户显示隐藏
addUserForm:{},//添加数据
addUserFormRul: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
phone: [
{ required: true, message: '请输入11为数字', trigger: 'blur' },
{ validator: checkPhone, trigger: 'blur' }
],
password:[
{ required:true, message:'请输入6位密码', trigger:'blur'}
],
email:[
{ required:true, message:'请输入邮箱', trigger:'blur'},
{ validator: checkEmail, trigger: 'blur' }
]
},
}
},
methods:{
//添加数据
addUser(){
this.addUserVisible = true
this.addUserForm = {
name:"",
phone:"",
password:"",
email:""
}
},
//提交增加的数据
sumbitAddUser(){
this.tableData = this.tableData || []
this.tableData.push({
name : this.addUserForm.name,
phone : this.addUserForm.phone,
password : this.addUserForm.password,
email : this.addUserForm.email,
})
this.addUserVisible = false,
this.$refs.addUserFormRef.resetFields();
},
}
}
删除数据 先给删除按钮绑定delUser事件
<el-button type="danger" size="small" @click="delUser(scope.$index)">删除</el-button>
// 删除数据
delUser(index){
// console.log(index)
// console.log(row)
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.tableData.splice(index,1);
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
编辑数据 绑定editUser事件
<el-button type="primary" size="small" @click="editUser(scope.$index,scope.row)">编辑</el-button>
<!-- 编辑用户 -->
<el-dialog
title="编辑用户"
:visible.sync="editUserVisible"
width="30%"
>
<el-form :model="editUserForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="editUserForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="editUserForm.password"></el-input>
</el-form-item>
<el-form-item label="手机号码" prop="phone">
<el-input v-model="editUserForm.phone"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="editUserForm.email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editUserVisible = false">取 消</el-button>
<el-button type="primary" @click="sumbitEditUser">确 定</el-button>
</span>
</el-dialog>
export default{
data(){
return{
editUserVisible:false,//编辑用户显示隐藏
editUserForm:{},//编辑数据
editId:"",
}
},
methods:{
// 编辑用户
editUser(index,row){
this.editUserVisible = true
this.editUserForm = Object.assign({},row)
this.editId = index
// console.log(this.editId)
// console.log(row)
},
// 确定修改
sumbitEditUser(){
var editData = this.editId;
// console.log(this.tableData[editData])
this.tableData[editData].name = this.editUserForm.name;
this.tableData[editData].password = this.editUserForm.password;
this.tableData[editData].phone = this.editUserForm.phone;
this.tableData[editData].email = this.editUserForm.email;
this.editUserVisible = false
},
}
}
查询功能实现方法一 查询功能就是当我在输入框输入信息的时候，自动将数据显示出来，使用的是计算属性
<el-col :span="6">
<label>搜索:</label>
<el-input clearable v-model="search" placeholder="用户名"style="width:200px;"></el-input>
</el-col>
computed:{
//模糊查询
tables(){
const search = this.search;
if(search){
return this.tableData.filter((item)=>{
// console.log(item.name)
return Object.keys(item).some((key)=>{
// console.log(key)
return String(item[key]).indexOf(search) > -1;
})
})
}
// this.total = this.tableData.length;
// console.log(this.total)
// return this.total
return this.tableData
// this.getUserList();
}
},
将计算属性绑定在data 里面显示
<div class="content">
<el-table
:data="tables.slice((currentPage-1)*pageSize,currentPage*pageSize)"
style="width: 100%">
<el-table-column
prop="name"
label="用户名"
width="180">
</el-table-column>
<el-table-column
prop="password"
label="密码"
width="180">
</el-table-column>
<el-table-column
prop="phone"
label="手机号码"
width="180">
</el-table-column>
<el-table-column
prop="email"
label="邮箱"
width="180">
</el-table-column>
<el-table-column
label="状态"
prop="status"
>
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
:active-value="1"
:inactive-value="2"
@change="changeStatus(scope.row.id,$event)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column
label="操作"
width="180">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="editUser(scope.$index,scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="delUser(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
|