element UI input 验证
<template>
<div class="group">
<div class="center gtop">
<el-button type="primary" icon="el-icon-plus" @click="act('add')">新增管理员</el-button>
<div class="center rtright">
账号:
<el-input style="width: 180px;margin: 0 15px 0 5px;"></el-input>
<el-button type="danger" icon="el-icon-search">搜索</el-button>
</div>
</div>
<el-table :data="list">
<el-table-column
prop="phone"
label="账号">
</el-table-column>
<el-table-column
prop="name"
label="名称">
</el-table-column>
<el-table-column
prop="ip"
label="登录IP">
</el-table-column>
<el-table-column
label="权限组">
<template slot-scope="scope">
<div v-for="item in scope.row.role" :key="item.role_id">{{item.role_name}}</div>
</template>
</el-table-column>
<el-table-column
prop="created_at"
label="添加时间">
</el-table-column>
<el-table-column
label="状态">
<template slot-scope="scope">{{scope.row.status == 1 ? '可用' : '不可用'}}</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button @click="act('edit',scope.row)" type="text">修改</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="40%">
<el-form ref="form" :model="actParams" label-width="120px" :rules="rules">
<el-form-item label="名称：" prop="name">
<el-input clearable style="width: 70%;" v-model="actParams.name"></el-input>
</el-form-item>
<el-form-item label="电话：" prop="phone">
<el-input style="width: 70%;" type="text" auto-complete="on" autofocus placeholder="请输入您的手机号" v-model="actParams.phone"></el-input>
</el-form-item>
<el-form-item label="密码：" prop="password">
<el-input clearable style="width: 70%;" v-model="actParams.password" show-password></el-input>
</el-form-item>
<el-form-item label="确认密码：" prop="password_confirmation">
<el-input clearable style="width: 70%;" v-model="actParams.password_confirmation" show-password @blur="change_password_confirmation"></el-input>
</el-form-item>
<el-form-item label="所属分组：">
<el-checkbox-group v-model="actParams.role">
<el-checkbox :label="item.name" v-for="item in roleList" :key="item.id"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="状态：">
<el-radio-group v-model="actParams.status">
<el-radio :label="0">不可用</el-radio>
<el-radio :label="1">可用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.actParams.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
list: [],
roleParams: {
name: '',
status: '',
},
roleList: [],
dialogVisible: false,
actParams: {
id: '',
name: '',
phone: '',
password: '',
password_confirmation: '',
role: [],
status: 0,
},
rules: {
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
phone: [{ required: true, message: '请输入电话', trigger: 'blur' },{ min: 11, max: 11, message: '请输入11为电话号码', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, message: '密码长度不能少于6位', trigger: 'blur' }],
password_confirmation: [{ required: true, message: '请确认密码', trigger: 'blur' },{ validator: validatePass2, trigger: 'blur' }],
}
}
},
methods: {
change_password_confirmation() {
console.log('event',this.actParams.password_confirmation)
},
confirm() {
console.log('ddss', this.actParams)
},
act(panduan, item) {
this.dialogVisible = true
},
getRoleList() {
this.$get('/role/list', this.roleParams, res => {
if(res.code == 200) {
this.roleList = res.data.list
console.log('管理员组', this.roleList)
} else {
this.$message({type: 'error', message: res.mgs || '获取管理员组失败!'})
}
})
},
getData() {
this.$get('/merchant/list', {}, res => {
console.log('管理员列表', res)
if(res.code == 200) {
this.list = res.data.data
}
})
}
},
created() {
this.getData()
this.getRoleList()
}
}
</script>
<style scoped>
.group {padding: 30px 20px; box-sizing: border-box;font-size: 14px;color: #2f2f2f;background-color: #fff;}
.center {display: flex;justify-content: space-between;align-items: center;}
.gtop {width: 100%;}
</style>
