1
<template>
2
  <div>
3
      <el-form :model="info" ref="forms">
4
          <el-table
5
          ref="tableRef"
6
          :data="info.data"
7
          border>
8
          <el-table-column align="center" property="name" label="*姓名">
9
              <template #default="row">
10
                  <el-form-item :prop="'data.' + row.$index + '.name'" :rules="formRules.name">
11
                      <el-input placeholder="请输入姓名" v-model="info.data[row.$index].name" />
12
                  </el-form-item>
13
              </template>
14
          </el-table-column>
15
          <el-table-column align="center" property="role" label="角色">
16
              <template #default="row">
17
                  <el-form-item :prop="'data.' + row.$index + '.role'" :rules="formRules.role">
18
                      <el-input placeholder="请输入角色" v-model="info.data[row.$index].role" />
19
                  </el-form-item>
20
              </template>
21
          </el-table-column>
22
          </el-table>
23
      </el-form>
24
    <el-button type="primary" @click="submitForm()">Submit</el-button>
25
  </div>
26
</template>

1
<script setup lang="ts">
2
import {ref, reactive} from 'vue'
3
import type { FormInstance } from 'element-plus'
4
let info:any = reactive({
5
  data:[
6
      {
7
      id: 0,
8
      name: '',
9
      role:''
10
      },{
11
        id: 1,
12
        name: '',
13
        role:''
14
      }
15
  ]
16
})
17
const formRules = reactive({
18
  name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
19
  role: [{ required: true, message: '请输入角色', trigger: 'change' }]
20
})
21
const forms = ref<FormInstance>()
22
const submitForm = async () => {
23
  if (!forms) return
24
  return await forms.value?.validate((valid: any) => {
25
      if (valid) {
26
      console.log('submit!')
27
      } else {
28
      console.log('error submit!')
29
      return false
30
      }
31
  })
32
}
33
</script>