小鱼儿心语:喷泉之所以漂亮是因为它有了压力;瀑布之所以壮观是因为它没有了退路;水之所以能穿石是因为永远在坚持。人生亦是如此。加油!
通过el-form和el-table的组合使用,在表格里面添加表单 并且进行验证 表单中v-model绑定scope.row中表格的数据.
<el-form :model="weightcontent" ref="queryRefqz" :inline="true" v-show="showSearch" label-width="68px" style="margin-left: 20px;height: 100%;" @submit.native.prevent>
<el-table v-loading="loading" :data="weightcontent.bznrList" @selection-change="handleSelectionChange" class="tables">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="编号" align="center" prop="number" width="50"/>
<el-table-column label="标准" align="center" prop="content" width="250">
<template #default="scope">
<span v-html="scope.row.content"></span>
</template>
</el-table-column>
<el-table-column label="标准分值" align="center" prop="total" />
<el-table-column label="权重" align="center" prop="weight" >
<template #default="scope">
<el-form-item :prop="`bznrList.${scope.$index}.weight`" :rules="{
required: true,
message: '请输入权重',
trigger: 'blur',
}">
<el-input
v-model="scope.row.weight"
placeholder="请输入权重"
clearable
@blur.stop="$event => editSave(scope.row)"
>
</el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>