html
<template>
<div style="display: flex; align-items: center">
<h3 style="margin-right: 20px">成员信息</h3>
</div>
<el-form :model="info" ref="forms">
<el-table
:data="info.membersList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column type="index" label="序号" width="55" />
<el-table-column label="成员号码" prop="userNumber">
<template #default="row">
<el-form-item
:prop="'membersList.' + row.$index + '.userNumber'"
:rules="formRules.userNumber"
>
<el-input
placeholder="请输入成员号码"
v-model="info.membersList[row.$index].userNumber"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="机顶盒侧mac" prop="age">
<template #default="row">
<el-form-item
:prop="'membersList.' + row.$index + '.macCode'"
:rules="formRules.macCode"
>
<el-input
placeholder="请输入机顶盒侧mac"
v-model="info.membersList[row.$index].macCode"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="机顶盒stbid" prop="snCode">
<template #default="row">
<el-form-item
:prop="'membersList.' + row.$index + '.snCode'"
:rules="formRules.snCode"
>
<el-input
placeholder="请输入机顶盒stbid"
v-model="info.membersList[row.$index].snCode"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="电视账号" prop="tvAccount">
<template #default="row">
<el-form-item
:prop="'membersList.' + row.$index + '.tvAccount'"
:rules="formRules.tvAccount"
>
<el-input
placeholder="请输入电视账号"
v-model="info.membersList[row.$index].tvAccount"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="备注(如房间号)" prop="remark">
<template #default="row">
<el-form-item
:prop="'membersList.' + row.$index + '.remark'"
:rules="formRules.remark"
>
<el-input
placeholder="请输入备注(如房间号)"
v-model="info.membersList[row.$index].remark"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="row">
<el-form-item :prop="'membersList.' + row.$index + '.oprcode'">
<el-select
placeholder="请选择操作类型"
style="margin-right: 10px"
v-model="info.membersList[row.$index].oprcode"
>
<el-option label="添加" value="01" />
<el-option label="删除" value="02" />
</el-select>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
</template>
TypeScript
<script setup name="index" lang="ts">
import {
Search,
Plus,
Upload,
Minus,
Download,
} from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
const { proxy } = getCurrentInstance()
let info: any = reactive({
membersList: [],
})
const formRules = reactive({
userNumber: [
{ required: true, message: '请输入成员号码', trigger: 'blur' },
],
macCode: [
{ required: true, message: '请输入机顶盒侧mac', trigger: 'blur' },
],
snCode: [{ required: true, message: '请输入机顶盒stbid', trigger: 'blur' }],
})
const forms = ref<FormInstance>()
const save = async () => {
if (!forms) return
await forms.value?.validate((valid: any) => {
if (valid) {
}
})
}
</script>