原创 vue 二级列表menu渲染4：获取状态开关【true false值】绑定 （开关按钮）

 

<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>

      <!-- 搜索与添加区域 -->

      <el-row :gutter="20">

        <el-col :span="8">

          <el-input placeholder="请输入内容">

            <el-button slot="append" icon="el-icon-search"></el-button>

          </el-input>

        </el-col>

        <el-col :span="4">

          <el-button type="primary">添加用户</el-button>

        </el-col>

      </el-row>

 

       <!-- 用户列表区域 -->

      <el-table :data="userlist" border stripe>

        <el-table-column type="index"></el-table-column>

        <el-table-column label="姓名" prop="username"></el-table-column>

        <el-table-column label="邮箱" prop="email"></el-table-column>

        <el-table-column label="电话" prop="mobile"></el-table-column>

        <el-table-column label="角色" prop="role_name"></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="操作" width="180px">

        </el-table-column>

      </el-table>

    </el-card>

  </div>

</template>

 

<script>

export default {

  data() {

    // 验证邮箱的规则

    var checkEmail = (rule, value, cb) => {

      // 验证邮箱的正则表达式

      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

 

      if (regEmail.test(value)) {

        // 合法的邮箱

        return cb()

      }

 

      cb(new Error('请输入合法的邮箱'))

    }

 

    // 验证手机号的规则

    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('请输入合法的手机号'))

    }

    return {

      // 获取用户列表的参数对象

      queryInfo: {

        query: '',

        // 当前的页数

        pagenum: 1,

        // 当前每页显示多少条数据

        pagesize: 2

      },

      userlist: [],

      total: 0,

      // 控制添加用户对话框的显示与隐藏

      addDialogVisible: false,

      // 添加用户的表单数据

      addForm: {

        username: '',

        password: '',

        email: '',

        mobile: ''

      },

      // 添加表单的验证规则对象

      addFormRules: {

        username: [

          { required: true, message: '请输入用户名', trigger: 'blur' },

          {

            min: 3,

            max: 10,

            message: '用户名的长度在3~10个字符之间',

            trigger: 'blur'

          }

        ],

        password: [

          { required: true, message: '请输入密码', trigger: 'blur' },

          {

            min: 6,

            max: 15,

            message: '用户名的长度在6~15个字符之间',

            trigger: 'blur'

          }

        ],

        email: [

          { required: true, message: '请输入邮箱', trigger: 'blur' },

          { validator: checkEmail, trigger: 'blur' }

        ],

        mobile: [

          { required: true, message: '请输入手机号', trigger: 'blur' },

          { validator: checkMobile, trigger: 'blur' }

        ]

      }

    }

  },

  created() {

    this.getUserList()

  },

  methods: {

    async getUserList() {

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

        params: this.queryInfo

      })

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

        return this.$message.error('获取用户列表失败！')

      }

      this.userlist = res.data.users

      this.total = res.data.total

      console.log(res)

    }

  }

}

</script>

 

<style>

</style>

-----------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------

添加动作回调监听   并处理回调