<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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。