<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="會(huì)員賬號(hào)">

        <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="請(qǐng)輸入會(huì)員賬號(hào)"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="真實(shí)姓名">

        <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="請(qǐng)輸入真實(shí)姓名"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="會(huì)員昵稱">

        <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="請(qǐng)輸入會(huì)員昵稱"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="會(huì)員手機(jī)">

        <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="請(qǐng)輸入手機(jī)號(hào)碼"/>

            </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('此項(xiàng)必填！'))

      } else {

        callback()

      }

    }

    const validateMobileInput = (rule, value, callback) => {

      if (!value) {

        return callback(new Error('手機(jī)號(hào)碼必填！'))

      } else if (!validateMobile(value)) {

        return callback(new Error('請(qǐng)?zhí)顚懻_的手機(jī)號(hào)碼格式！'))

      } else {

        callback()

      }

    }

 

    return {

      list: [],

      // input框失焦校驗(yàn)

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

      // 提交校驗(yàn)

      if (validateName(row.login) && validateName(row.real_name) && validateName(row.nickname) && validateMobile(row.mobile)) {

       //數(shù)據(jù)提交和錯(cuò)誤catch

    }

  }

}

</script>

藍(lán)藍(lán)設(shè)計(jì)( m.jjddy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。