<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 引入样式 element-ui-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" rel="external nofollow">
<!-- 引入组件库 element-ui-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<!-- 这是使用elementUI库来创建的页面 -->
<!-- https://element.faas.ele.me/#/zh-CN/component/installation 这是ui库的地址 -->
<el-row :gutter="20">
<el-col :span="15" :offset="5">
<el-card class="box-card">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="搜索">
<el-input v-model="form.keycode"></el-input>
</el-form-item>
</el-form>
<el-table :data="findlist" border style="width: 100%">
<el-table-column prop="id" label="id" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="sex" label="性别" width="180">
</el-table-column>
<el-table-column prop="phone" label="电话">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" circle @click="editbtn(scope.row,scope.$index)"></el-button>
<el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id,scope.$index)"></el-button>
</template>
</el-table-column>
</el-table>
<el-button style="margin-top: 10px;" type="primary" @click="adddialog = true">添加</el-button>
</el-card>
</el-col>
</el-row>
<!-- 添加dialog弹窗 -->
<el-dialog title="添加用户" :visible.sync="adddialog" width="30%" :close-on-click-modal="false" @close="addclosedialog">
<el-form :model="user" :rules="addformrules" ref="addformref" label-width="70px">
<el-form-item label="名字" prop="name">
<el-input v-model="user.name"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="user.sex">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="手机" prop="phone">
<el-input v-model="user.phone"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="adddialog = false">取 消</el-button>
<el-button type="primary" @click="add">确 定</el-button>
</span>
</el-dialog>
<!-- 修改的dialog弹窗 -->
<el-dialog title="添加用户" :visible.sync="editdialog" width="30%" :close-on-click-modal="false" @close="editclosedialog">
<el-form :model="edituser" :rules="editformrules" ref="editformref" label-width="70px">
<el-form-item label="id" prop="id">
<el-input v-model="edituser.id" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="名字" prop="name">
<el-input v-model="edituser.name"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="edituser.sex">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="手机" prop="phone">
<el-input v-model="edituser.phone"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editdialog = false">取 消</el-button>
<el-button type="primary" @click="edit">确 定</el-button>
</span>
</el-dialog>
</div>
<script type="text/javascript">
var checkMobile = (rule, value, cb) => {
// 验证手机号的正则表达式
const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
if (regMobile.test(value)) {
return cb()
}
cb(new Error('请输入合法的手机号码'))
}
var vue = new Vue({
el: '#app',
data: {
list: [{ // 列表的信息
id: '0',
name: '李四弟',
sex: '男',
phone: '18150026755'
},
{
id: '1',
name: '张三姑',
sex: '女',
phone: '18150027711'
},
{
id: '2',
name: '王五叔',
sex: '男',
phone: '18150027722'
}
],
user: { // 添加用户的数据
id: "",
name: '',
sex: '男',
phone: ''
},
form: {
keycode: '' // 搜索输入的文字
},
adddialog: false, // 添加用户弹框 默认隐藏
addformrules: { //添加用户的校验规则
name: [{
required: true,
message: '请输入正确的密码',
trigger: 'blur'
},
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}
],
phone: [{
required: true,
message: '请输入正确的手机号码',
trigger: 'blur'
},
{
validator: checkMobile,
trigger: 'blur'
}
],
},
editdialog: false, // 修改用户弹窗 默认隐藏
editformrules: { // 修改用户校验规则
name: [{
required: true,
message: '请输入正确的密码',
trigger: 'blur'
},
{
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
}
],
phone: [{
required: true,
message: '请输入正确的手机号码',
trigger: 'blur'
},
{
validator: checkMobile,
trigger: 'blur'
}
],
},
edituser: { // 修改用户信息存放的地方
id: "",
name: '',
sex: '',
phone: ''
},
editIndex: 0 // 修改用户信息的索引值
},
methods: {
del(id, index) { //删除用户信息
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { //这个是ui库的校验规则
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //点击确定后进入这个方法
this.list.forEach(value => {
if (value.id == id) {
this.list.splice(index, 1);
}
})
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => { //点击取消或者关掉弹窗会进入这个方法
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
add() { // 添加用户信息
this.$refs.addformref.validate( valid => { // 这个是ui库的校验规则 valid 为true 说明校验通过
if (!valid) return
// 动态赋予id的值 获取到用户列表最后一个id，让他加1
var id = parseInt(this.list.slice(-1)[0].id) +1;
this.user.id = id;
this.list.push(this.user); // 再list中最后插入新增的用户信息
this.adddialog = false;
})
},
addclosedialog() { //关闭添加弹窗，让数值变成空
// this.$refs.addformref.resetFields()
this.user = {
id: "",
name: '',
sex: '男',
phone: ''
};
},
editclosedialog() { // 关闭修改弹窗 让数值变成空
// this.$refs.editformref.resetFields()
this.edituser = {};
},
edit() { //修改用户信息
// this.list[this.editIndex] = this.edituser; 这种方法是不行的
Vue.set(this.list, this.editIndex, this.edituser); // 这是vue的赋值的方式
this.editdialog = false;
},
editbtn(userInfo, index) { //打开修改用户信息弹窗
this.editdialog = true;
this.editIndex = index;
this.edituser = userInfo;
}
},
computed: { // 这个是计算属性
findlist() { // 用来返回名字匹配的数据
return this.list.filter(value => {
return value.name.indexOf(this.form.keycode) != -1;
})
}
}
})
</script>
</body>
</html>
增加
修改
查询
删除
3705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
