Vue2+Element制作系统管理->用户列表页1. 用户按钮权限问题 2. Eltable 在发送请求获取table

1. 用户按钮权限问题

<el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>

isAuth函数判断是否显示操作按钮，比如 系统管理员具有新增和批量删除的权限

/**
 * 是否有权限
 * @param {*} key
 */
export function isAuth (key) {
  return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
}

isAuth函数挂载在main.js全局Vue实例上

Vue.prototype.isAuth = isAuth     // 权限方法

1. Eltable 在发送请求获取table数据之前和请求完成之后 添加v-loading效果

    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">

      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('...........'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'username': this.dataForm.userName
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },

1. 关于获取的表格数据分页，一般情况下，发送请求时，传上参数 page第几页 limit每页几条，返回一共totalPage 并赋值做处理
2. 对于条件查询，点击查询按钮时，要把pageIndex 也就是当前处于第几页修改为1。并在发送请求条件查询新数据前，清空上一次查询时传参的值
3. 关于多选

@selection-change="selectionChangeHandle"

这个是ElTable的多选方法，val打印出来是选中的元素组成的数组

    selectionChangeHandle(val) {
      console.log('多选', val)
      this.dataListSelections = val
    },

批量删除的按钮 有一个disabled属性 表示启用或者禁用，我们凭借多选选中的数组的长度来判断是启用还是禁用

        <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()"
          :disabled="dataListSelections.length <= 0">批量删除</el-button>

1. 删除和批量删除的调接口操作方法 在Table管理中，我们通常可以删除某一条记录，也可以批量删除某几条记录。此时，我们会使用同一个删除方法。

// 批量删除
<el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()"
:disabled="dataListSelections.length <= 0">批量删除</el-button>
          
// 单个删除
<el-button v-if="isAuth('sys:user:delete')" type="text" size="small"
@click="deleteHandle(scope.row.userId)">删除</el-button>

在这里我们管理的是用户管理，所以 当单个用户需要删除的时候，我们将用户Id作为参数传递到方法里面去，而批量删除则不传参。我们通过这个操作便可以在同一个删除方法内，区分什么时候是单个删除，什么时候是批量删除

• id ? [id]：如果 id 存在（即不是 null、undefined、0 或空字符串等），则将 userIds 设置为一个数组，包含单个元素 id。
• : this.dataListSelections.map(item => { return item.userId })：如果 id 不存在，则执行冒号后的部分。这里使用了 map 函数来遍历 this.dataListSelections 数组，并提取每个项目的 userId，生成一个包含所有用户 ID 的新数组。

    deleteHandle(id) {
      var userIds = id ? [id] : this.dataListSelections.map(item => {
        return item.userId
      })
      this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      // 点击确定按钮
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/sys/user/delete'),
          method: 'post',
          data: this.$http.adornData(userIds, false)
        }).then(({ data }) => {
          // 检查 `data` 是否存在，并且 `data.code` 是否等于 `0`。这个条件表明删除操作成功完成。
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              // `this.getDataList()` 获取数据列表 的调用是在 `onClose` 回调函数中定义的。也就是说，当这个成功消息框在屏幕上显示的持续时间（`duration: 1500` 毫秒，即 1.5 秒）到达后，消息框会自动关闭，此时会触发 `onClose` 中的回调，从而调用 `this.getDataList()`。
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      // 点击取消按钮  
      }).catch(() => { })
    }

1. 关于新增用户和修改用户 新增和修改用的是同一个弹窗，并且通常情况下，这个弹窗是通过组件的方式引入到当前页面的。 我们在点击修改按钮的时候，会将用户Id传递过去，而新增的时候不需要传，以此在同一个方法内，区分什么时候是新增操作，什么时候是修改操作。

<el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
<el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>

采用一个addOrUpdateVisible变量来控制新增/修改弹窗组件的显示与隐藏

<!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    
// 新增 / 修改
addOrUpdateHandle(id) {
    this.addOrUpdateVisible = true
    this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
   })
},    

this.$refs.addOrUpdate.init(id)是组件中的方法。 在组件的init方法中，将传递过来的Id的值赋值

init (id) {
    this.dataForm.id = id || 0
}

根据id是否有值来确定弹框的标题

  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">

1. 关于修改密码是否需要显示 使用Element-ui的switch开关组件，来控制 密码/确认密码的显示与隐藏

      <el-form-item label="修改密码">
        <el-switch v-model="changePassword"></el-switch>
      </el-form-item>
      <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }" v-show="this.changePassword">
        <el-input v-model="dataForm.password" type="password" placeholder="密码" auto-complete="new-password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }" v-show="this.changePassword">
        <el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>
      </el-form-item>

1. 关于ELement的表单校验 表单校验有两种方式，这两种也可以结合使用 普通校验：Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

trigger: 'blur'
min: 12
pattern: /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/,
required: true

message: '错误提示'

validator: "自定义校验的规则"

validator

data(){
    var validateComfirmPassword = (rule, value, callback) => {
    if (!this.dataForm.id && !/\S/.test(value)) {
         callback(new Error('确认密码不能为空'))
    } else if (this.dataForm.password !== value) {
         callback(new Error('确认密码与密码输入不一致'))
    } else {
         callback()
    }
    
return {
// 需要retuen的data
}
}