vue+element实现搜索功能

2025-10-29 16:05:25

1、在element.js中导入要要用到的组件

2、给添加按钮定义click单击事件，在element复制dialog对话框

3、

<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%">

<el-form

:model="addForm"

:rules="addRules"

ref="AddRuleForm"

label-width="100px"

class="demo-ruleForm"

<el-form-item label="用户名称" prop="username">

<el-input v-model="addForm.username"></el-input>

</el-form-item>

<el-form-item label="用户密码" prop="password">

<el-input v-model="addForm.password"></el-input>

</el-form-item>

<el-form-item label="邮箱" prop="email">

<el-input v-model="addForm.email"></el-input>

</el-form-item>

<el-form-item label="手机号" prop="mobile">

<el-input v-model="addForm.mobile"></el-input>

</el-form-item>

</el-form>

<el-button @click="closeDialog">取消</el-button>

<el-button type="primary" @click="addBtn">确定</el-button>

</span>

</el-dialog>

vue+element实现搜索功能

4、在data中定义

addForm: {

username: '',

password: '',

email: '',

mobile: ''

addRules: {

username: [

{ required: true, message: '请输入活动名称', trigger: 'blur' }

password: [

{ required: true, message: '请输入活动名称', trigger: 'blur' },

{ min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }

email: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],

mobile: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]

5、 // 添加用户对话框的确定按钮单击事件

async addBtn(user) {

const { data: res } = await this.$http.post('users', this.addForm)

console.log(res)

if (res.meta.status !== 201) {

return this.$message.error('添加用户失败,请查看用户名是否重复')

}

this.$message.success('添加用户成功')

this.addDialogVisible = false

this.$refs.AddRuleForm.resetFields()

this.getUserList()

// 取消添加用户对话框

closeDialog() {

this.$refs.AddRuleForm.resetFields()

this.addDialogVisible = false

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。