vue-elementui实现搜索、表单校验、table布局、分页联动

功能列表

  • 1.搜索查询
  • 2.table列表并用template对部分字段特殊处理
  • 3.分页设置,并与table进行联动
  • 4.新增账户(参数校验)
  • 5.编辑账户(获取原数据并提交更新、参数校验)
  • 6.删除账户

一、参数校验的使用

去这里查看详细介绍 这里需要一个data和一个rules,一个用来存储数据,另一个用来写校验规则。这里,el-form-item要通过prop将值传入到对应组件,不然无法完成校验。

二、table的使用

el-table上通过自定义指令v-loading可以控制loading的显示隐藏,loading默认会覆盖当前dom。

:data="tableData"用来绑定table的数据,对应的el-table-column的prop传入对应字段key值,lable为table-title的展现字段名

如果要分发固定模版,用template slot-scope="scope" 来分发

三、分页及与table的联动

分页需要绑定currentPage(当前页)、pageSizes(每页条数选择列表)、pageSize(每页条数)、total(总条数)、layout(布局样式)等属性,以及size-change(选择每页条数变化)、current-change(当前页变化)两个方法。 这两个方法都会传入一个值,至就是当前change对应的数字。

在data中创建tableData、tableLoading、pageData三个数据,当页码变化时,触发tableLoading,然后修改currentPage等属性,初始化表格渲染,从后端获取数据。

<template>
  <div id="settings-child-account-container" class="container">
    <!--新增收件人模块 开始-->
    <el-dialog title="新增子账户" :visible.sync="addNew.visible" >
      <el-form :model="addNew" :rules="addNewRules" label-width="70px" label-position="right"  ref="addNewForm">
        <el-form-item label="用户名"  prop="membername" >
          <el-input v-model="addNew.membername" suffix-icon="el-icon-date"  placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="手机号"  prop="mobileno"  >
          <el-input v-model="addNew.mobileno" suffix-icon="el-icon-date"  placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码"  prop="password"  >
          <el-input v-model="addNew.password" type="password" suffix-icon="el-icon-date"  placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="状态"  prop="state"  >
          <el-select v-model="addNew.state" placeholder="请选择查询状态">
            <el-option label="已启用" value="1"></el-option>
            <el-option label="已禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限"  prop="roleId" >
          <el-select v-model="addNew.roleId" placeholder="请选择查询状态">
            <el-option v-for="item in addNew.roleList"  :label="item.roleTitle" :value="item.roleId" :key="item.roleId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addNew.visible = false">取 消</el-button>
        <el-button type="primary" @click="addNewSubmit('addNewForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增收件人模块 结束-->

    <!--更新子账户模块 开始-->
    <el-dialog title="编辑子账户" :visible.sync="updateAdmin.visible" >
      <el-form :model="updateAdmin" :rules="updateAdminRules" label-width="70px" label-position="right"  ref="updateAdminForm">
        <el-form-item label="用户名"  prop="membername" >
          <el-input v-model="updateAdmin.membername" suffix-icon="el-icon-date"  placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="手机号"  prop="mobileno"  >
          <el-input v-model="updateAdmin.mobileno" suffix-icon="el-icon-date"  placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="密码"  prop="password"  >
          <el-input v-model="updateAdmin.password"  type="password"  suffix-icon="el-icon-date"  placeholder="如不更改密码,可选填"></el-input>
        </el-form-item>
        <el-form-item label="状态"  prop="state"  >
          <el-select v-model="updateAdmin.state" placeholder="请选择查询状态">
            <el-option label="已启用" value="1"></el-option>
            <el-option label="已禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限"  prop="roleId" >
          <el-select v-model="updateAdmin.roleId" placeholder="请选择查询状态">
            <el-option  v-for="item in updateAdmin.roleList" :label="item.roleTitle" :value="item.roleId" :key="item.roleId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateAdmin.visible = false">取 消</el-button>
        <el-button type="primary" @click="updateAdminSubmit('updateAdminForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--更新子账户模块 结束-->

    <!--搜索头 开始-->
    <section id="search-title">
      <el-form :inline="true" :model="searchCondition" class="demo-form-inline">
        <el-form-item label="用户名或手机号">
          <el-input v-model="searchCondition.userName" suffix-icon="el-icon-date"  placeholder="请输入用户名或手机号"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchCondition.state" placeholder="请选择查询状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="已启用" value="1"></el-option>
            <el-option label="已禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item id="submit-item" >
          <el-button type="primary" @click="onSearchSubmit">查询</el-button>
        </el-form-item>
        <el-form-item id="addNew-item"  class="fr">
          <el-button type="primary" @click="addNewHandler">新增</el-button>
        </el-form-item>
      </el-form>
    </section>
    <!--搜索头 结束-->

    <!--表格模块 开始-->
    <section id="table-main">
      <!--列表 开始-->
      <el-table
              v-loading="tableLoading"
              :data="tableData"
              border
              style="width: 100%">
        <el-table-column
                prop="membername"
                label="用户名">
        </el-table-column>
        <el-table-column
                prop="mobileno"
                label="手机号">
        </el-table-column>
        <el-table-column
                prop="password"
                label="密码">
          <template slot-scope="scope">
            <el-button @click="updatePassWordHandler(scope)" type="text" size="small">重置</el-button>
          </template>
        </el-table-column>
        <el-table-column
                prop="stateCn"
                label="状态">
        </el-table-column>
        <el-table-column
                prop="handles"
                label="操作">
          <template slot-scope="scope">
            <el-button @click="updateAdminHandler(scope)" type="text" size="small">编辑</el-button>
            <el-button @click="deleteAdminHandler(scope)"  type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--列表 结束-->

      <!--分页部分 开始-->
      <section id="pagination">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizeArr"
                :page-size="pageData.pageSizeAct"
                layout="total, sizes, prev, pager, next"
                :total="pageData.total">
        </el-pagination>
      </section>
      <!--分页部分 结束-->
    </section>
    <!--表格模块 结束-->
  </div>
</template>
<script>
  import {findAdmins, addSubAccount, updateSubAccount, deleteSubAccount} from '@/api/settingsChildAccount'
  import {getAllRoles} from '@/api/settingsJurisdiction'
  import {codeState, dataFormatChildAccountList} from '@/assets/js/config'
  export default{
    data () {
      return {
        // 搜索条件
        searchCondition: {
          userName: '',
          state: '',
          dateVal: ''
        },
        // 表格数据
        tableData: [],
        // 表格加载中
        tableLoading: false,
        // 分页数据
        pageData: {
          total: 0,
          pageNum: 0,
          pageSizeArr: [10, 50, 100, 200],
          pageSizeAct: 10,
          currentPage: 1,
          visible: false
        },
        // 新增用户
        addNew: {
          mobileno: '',
          password: '',
          membername: '',
          state: '',
          roleId: '',
          visible: false,
          roleList: []
        },
        // 新增用户校验规则
        addNewRules: {
          mobileno: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[34578]\d{9}$/, message: '请正确输入您的手机号码', trigger: 'blur' }
          ],
          membername: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入您的密码', trigger: 'blur' },
            { pattern: /^[\d_a-zA-Z]{6,18}$/, message: '请输入6-18位数字字母组成的密码', trigger: 'blur' }
          ],
          state: [
            { required: true, message: '请选择相关状态', trigger: 'change' }
          ],
          roleId: [
            { required: true, message: '请选择角色权限', trigger: 'change' }
          ]
        },
        // 更新子账户信息
        updateAdmin: {
          id: '',
          mobileno: '',
          password: '',
          membername: '',
          state: '',
          roleId: '',
          visible: false,
          index: '',
          roleList: []
        },
        // 更新子账户信息校验规则
        updateAdminRules: {
          mobileno: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[34578]\d{9}$/, message: '请正确输入您的手机号码', trigger: 'blur' }
          ],
          membername: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: false, pattern: /^[\d_a-zA-Z]{6,18}$/, message: '请输入6-18位数字字母组成的密码', trigger: 'blur' }
          ],
          state: [
            { required: true, message: '请选择相关状态', trigger: 'change' }
          ],
          roleId: [
            { required: true, message: '请选择角色权限', trigger: 'change' }
          ]
        },
        // 更新密码
        updatePassWord: ''
      }
    },
    mounted () {
      // 初始化获取子账户列表
      this.initAdminList(1)
      // 获取权限列表
      this._getJurisdictionList()
    },
    methods: {
      /***************************************
       *           获取子账户列表
       ***************************************/
      // 初始化获取自账户列表
      initAdminList (index) {
        this._initPageData(index)
        this._initQuestTableList()
      },
      // 开始请求账户列表数据
      _initQuestTableList () {
        this.tableLoading = true
        let opt = {
          userName: this.searchCondition.userName,
          state: this.searchCondition.state,
          pageNum: this.pageData.pageNum,
          pageSize: this.pageData.pageSizeAct
        }
        this._questTableListHandler(opt)
      },
      // 请求账户列表数据函数
      _questTableListHandler (opt) {
        findAdmins(opt).then(res => {
          if (res.data.code === codeState.ERR_OK) {
            let formatArr = dataFormatChildAccountList(res.data.data.adminList)
            this.tableData = formatArr
            this.pageData.total = res.data.data.total
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              showClose: true,
              duration: 3000
            })
          }
          this.tableLoading = false
        })
      },
      // 开始搜索
      onSearchSubmit () {
        this.initAdminList(1)
      },
      // 分页--当前条数和长度
      _initPageData (index) {
        this.pageData.pageNum = (index - 1) * this.pageData.pageSizeAct
        this.pageData.currentPage = index
      },
      // 请求不同页码
      handleCurrentChange (index) {
        this.initAdminList(index)
      },
      // 分页size改变
      handleSizeChange (index) {
        this.pageData.pageSizeAct = index
        this.initAdminList(1)
      },
      /***************************************
       *           子账户编辑删除
       ***************************************/
      // 唤起编辑列表
      updateAdminHandler (scope) {
        this.updateAdmin.id = scope.row.id
        this.updateAdmin.mobileno = scope.row.mobileno
        this.updateAdmin.membername = scope.row.membername
        this.updateAdmin.state = scope.row.state + ''
        this.updateAdmin.roleId = scope.row.roleId
        this.updateAdmin.index = scope.$index
        this.updateAdmin.visible = true
      },
      // 编辑格式校验
      updateAdminSubmit (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this._updateSubAccount(this.updateAdmin)
          } else {
            return false
          }
        })
      },
      // 请求修改子账户信息接口
      _updateSubAccount (opt) {
        updateSubAccount(opt).then(res => {
          if (res.data.code === codeState.ERR_OK) {
            this.initAdminList(this.pageData.currentPage)
            this.addNew.visible = false
            this.$message({
              message: '修改成功',
              showClose: true,
              type: 'success',
              duration: 3000
            })
          } else {
            this.$message({
              message: res.data.msg,
              showClose: true,
              type: 'warning',
              duration: 3000
            })
          }
          this.updateAdmin.visible = false
        })
      },
      // 删除子账户
      deleteAdminHandler (scope) {
        let opt = {
          id: scope.row.id
        }
        this._deleteAdminCallMsg(opt, scope.$index)
      },
      // 唤起确认对话框
      _deleteAdminCallMsg (opt, index) {
        this.$confirm('此操作将删除该子账户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this._deleteAdminFn(opt, index)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 发起删除请求
      _deleteAdminFn (opt, index) {
        deleteSubAccount(opt).then(res => {
          if (res.data.code === codeState.ERR_OK) {
            // 初始化获取子账户列表
            this.initAdminList(this.pageData.currentPage)
            this.addNew.visible = false
            this.$message({
              message: '删除成功',
              showClose: true,
              type: 'success',
              duration: 3000
            })
          } else {
            this.$message({
              message: res.data.msg,
              showClose: true,
              type: 'warning',
              duration: 3000
            })
          }
        })
      },
      // 更新密码
      updatePassWordHandler (scope) {
        this.$prompt('请输入新密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[\d_a-zA-Z]{6,18}$/,
          inputErrorMessage: '请输入6-18位数字字母组成的密码'
        }).then(({ value }) => {
          this.updateAdmin.id = scope.row.id
          this.updateAdmin.mobileno = scope.row.mobileno
          this.updateAdmin.membername = scope.row.membername
          this.updateAdmin.state = scope.row.state + ''
          this.updateAdmin.roleId = scope.row.roleId
          this.updateAdmin.password = value
          this.updateAdmin.index = scope.$index
          this._updateSubAccount(this.updateAdmin)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      /**************************************
       *            新增子账户
       *************************************/
      // 新增子账户 -- 控制弹出窗口
      addNewHandler () {
        this.addNew.visible = true
      },
      // 新增子账户 -- 表单校验
      addNewSubmit (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this._addSubAccountFn(this.addNew)
          } else {
            return false
          }
        })
      },
      // 新增子账户 -- 数据提交
      _addSubAccountFn (opt) {
        addSubAccount(opt).then(res => {
          if (res.data.code === codeState.ERR_OK) {
            // 初始化获取子账户列表
            this.initAdminList(this.pageData.currentPage)
            this._resetAddSubAccountData()
            this.addNew.visible = false
            this.$message({
              message: '新增成功',
              showClose: true,
              type: 'success',
              duration: 3000
            })
          } else {
            this.$message({
              message: res.data.msg,
              showClose: true,
              type: 'warning',
              duration: 3000
            })
          }
        })
      },
      // 重置新增子账户数据
      _resetAddSubAccountData () {
        this.addNew.mobileno = ''
        this.addNew.membername = ''
        this.addNew.state = ''
        this.addNew.password = ''
        this.addNew.roleId = ''
      },
      // 获取权限列表
      _getJurisdictionList () {
        getAllRoles({}).then(res => {
          this.addNew.roleList = res.data.data
          this.updateAdmin.roleList = res.data.data
        })
      }
    }
  }
</script>

随机浏览