element ui在table中放入input且实现验证 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


element ui在table中放入input且实现验证

2019-8-28 释然 前端及开发文章及欣赏


<template>
  <div class="app-container" style="overflow: auto;">
    <el-table
      :data="list"
      size="small"
      element-loading-text="Loading"
      border
      highlight-current-row
    >
      <el-table-column label="会员账号">
        <template slot-scope="scope">
          <el-form :model="scope.row" :rules="rules">
            <el-form-item prop="login">
              <el-input v-show="true" v-model="scope.row.login" placeholder="请输入会员账号"/>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="真实姓名">
        <template slot-scope="scope">
          <el-form :model="scope.row" :rules="rules">
            <el-form-item prop="real_name">
              <el-input v-show="true" v-model="scope.row.real_name" placeholder="请输入真实姓名"/>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="会员昵称">
        <template slot-scope="scope">
          <el-form :model="scope.row" :rules="rules">
            <el-form-item prop="nickname">
              <el-input v-show="true" v-model="scope.row.nickname" placeholder="请输入会员昵称"/>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="会员手机">
        <template slot-scope="scope">
          <el-form :model="scope.row" :rules="rules">
            <el-form-item prop="mobile">
              <el-input v-show="true" v-model="scope.row.mobile" placeholder="请输入手机号码"/>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-form ref="scope.row" :model="scope.row">
            <el-form-item>
              <el-button @click="handleSubmit(scope.$index,scope.row)">重试</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { retry } from '@/api/table'
import { validateName } from '@/utils/validate'
import { validateMobile } from '@/utils/validate'
 
export default {
  data() {
    // validator
    const validateNameInput = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('此项必填!'))
      } else {
        callback()
      }
    }
    const validateMobileInput = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号码必填!'))
      } else if (!validateMobile(value)) {
        return callback(new Error('请填写正确的手机号码格式!'))
      } else {
        callback()
      }
    }
 
    return {
      list: [],
      // input框失焦校验
      rules: {
        nickname: [{ validator: validateNameInput, trigger: 'blur' }],
        real_name: [{ validator: validateNameInput, trigger: 'blur' }],
        mobile: [{ validator: validateMobileInput, trigger: 'blur' }],
        login: [{ validator: validateNameInput, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      const errorData = JSON.parse(this.$route.query.errorData)
      this.list = JSON.parse(errorData)
    },
    handleSubmit(index, row) {
      // 提交校验
      if (validateName(row.login) && validateName(row.real_name) && validateName(row.nickname) && validateMobile(row.mobile)) {
       //数据提交和错误catch
    }
  }
}
</script>
蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务
标签: element ui在table中放入input且实现验证 « 原型该画到什么程度? | 当我们谈论设计的高级感时,到底在说什么?»


蓝蓝 http://www.bjhbys.com

  1. 2019年8月(63)
  2. 2019年7月(61)
  3. 2019年6月(59)
  4. 帝皇彩票官网2019年5月(32)
  5. 2019年4月(37)
  6. 2019年3月(43)
  7. 2019年2月(26)
  8. 帝皇彩票官网2019年1月(45)
  9. 2018年12月(41)
  10. 2018年11月(40)
  11. 2018年10月(29)
  12. 2018年9月(40)
  13. 2018年8月(87)
  14. 2018年7月(107)
  15. 帝皇彩票官网2018年6月(86)
  16. 2018年5月(110)
  17. 2018年4月(40)
  18. 2018年3月(35)
  19. 帝皇彩票官网2017年8月(35)
  20. 2017年7月(45)
  21. 2017年6月(7)
  22. 2017年5月(27)
  23. 2017年4月(51)
  24. 2017年3月(70)
  25. 2017年2月(65)
  26. 2017年1月(69)
  27. 2016年12月(55)
  28. 2016年11月(111)
  29. 2016年10月(92)
  30. 2016年9月(53)
  31. 2016年8月(9)
  32. 2016年7月(4)
  33. 2016年6月(9)
  34. 2016年3月(19)
  35. 2016年2月(26)
  36. 2016年1月(30)
  37. 2015年12月(33)
  38. 2015年11月(35)
  39. 2015年10月(46)
  40. 2015年9月(43)
  41. 2015年8月(40)
  42. 2015年7月(33)
  43. 2015年6月(46)
  44. 2015年5月(58)
  45. 帝皇彩票官网2015年4月(70)
  46. 2015年3月(55)
  47. 2015年2月(17)
  48. 2015年1月(33)
  49. 帝皇彩票官网2014年12月(21)
  50. 2014年11月(84)
  51. 2014年10月(94)
  52. 2014年9月(6)
  53. 2014年8月(1)
  54. 2014年7月(13)
  55. 2014年6月(66)
  56. 2014年5月(99)
  57. 2014年4月(88)
  58. 2014年3月(102)
  59. 2014年2月(68)
  60. 2014年1月(83)
  61. 2013年12月(106)
  62. 2013年11月(112)
  63. 2013年10月(61)
  64. 2013年9月(20)
  65. 2013年7月(13)
  66. 2013年6月(27)
  67. 2013年5月(48)
  68. 2013年4月(39)
  69. 2013年3月(8)
  70. 2013年2月(20)
  71. 2013年1月(31)
  72. 2012年12月(33)
  73. 2012年11月(31)
  74. 2012年10月(23)
  75. 2012年9月(8)
  76. 2012年7月(14)
  77. 2012年6月(15)
  78. 2012年5月(31)
  79. 2012年4月(24)
  80. 2012年2月(4)
  81. 2012年1月(8)
  82. 2011年12月(35)
  83. 帝皇彩票官网2011年11月(32)
  84. 2011年10月(13)
  85. 2011年8月(1)
  86. 2011年6月(1)
订阅Rss
吉利彩票开奖 状元彩票官网 大象彩票APP 帝皇彩票 博发彩票APP下载 大象彩票APP 桔子彩票官网 迪士尼彩乐园注册 桔子彩票平台 状元彩票官网