166Vue-scope.row+正则验证

最新推荐文章于 2024-09-13 22:59:34 发布

教练我真的想敲代码

最新推荐文章于 2024-09-13 22:59:34 发布

阅读量597

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/gy_9543/article/details/107965489

版权

本文详细探讨了Vue.js中scope.row的用法，讲解了如何利用它来绑定和操作数据。同时，文章还介绍了正则表达式在Vue中的应用，包括如何创建有效的正则验证规则，确保用户输入的数据符合特定格式，从而提高前端数据的准确性与安全性。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <!-- 搜索与添加区input输入框 -->
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        </el-col>
      </el-row>
      <!--用户列表区  -->
      <el-table :data="userlist" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="role_name" label="角色"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作&#

最低0.47元/天解锁文章