上代码:
<el-form ref="tableDataFrom" :model="tableDataFrom" :rules="rules">
<el-table
class="positionLimit"
:data="tableDataFrom.list"
border
height="calc(100vh - 450px)"
@selection-change="changeRow"
>
<el-table-column min-width="30" align="center" type="selection" />
<el-table-column min-width="120" align="center" label="债券名称">
<template slot-scope="scope">
<el-form-item :prop="'list.'+ scope.$index + '.name'" :rules="rules.name">
<el-select
v-model="scope.row.name"
:disabled="type===2"
placeholder="请选择"
filterable
>
<el-option
v-for="item in accountList"
:key="item.id"
:label="item.loginaccount"
:value="item.loginaccount"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="120" align="center" label="债券代码">
<template slot-scope="scope">
<el-form-item>
<el-input v-model="scope.row.code" disabled />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="120" align="center" label="持仓数量(万元)">
<template slot-scope="scope">
<el-form-item :prop="'list.'+ scope.$index + '.count'" :rules="rules.count">
<el-input v-model="scope.row.count" placeholder="请输入持仓数量" />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="120" align="center" label="单位成本">
<template slot-scope="scope">
<el-form-item :prop="'list.'+ scope.$index + '.chengben'" :rules="rules.chengben">
<el-input v-model="scope.row.chengben" placeholder="请输入单位成本" />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="120" align="center" label="持仓成本">
<template slot-scope="scope">
<el-form-item :prop="'list.'+ scope.$index + '.chengben1'" :rules="rules.chengben1">
<el-input v-model="scope.row.chengben1" placeholder="请输入持仓成本" />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="120" align="center" label="持仓市值">
<template slot-scope="scope">
<el-form-item :prop="'list.'+ scope.$index + '.shizhi'" :rules="rules.shizhi">
<el-input v-model="scope.row.shizhi" placeholder="请输入持仓市值" />
</el-form-item>
</template>
</el-table-column>
<el-table-column min-width="80" align="center" label="操作">
<template slot-scope="scope">
<el-button type="danger" size="mini" @click="deleteSum(scope.$index)">删除</el-button>
</template>
</el-table-column></el-table>
</el-form>
数据结构:
tableDataFrom: {
list: []
},
//rules
rules: {
name: [{ required: true, message: '请选择证券名称', trigger: 'change' }],
count: [{ required: true, validator: checkNumFloLength('持仓数量', 13, 2), trigger: 'blur' }],
chengben: [{ required: true, validator: checkNumFloLength('单位成本', 13, 4), trigger: 'blur' }],
chengben1: [{ required: true, validator: checkNumFloLength('持仓成本', 13, 2), trigger: 'blur' }],
shizhi: [{ required: true, validator: checkNumFloLength('持仓市值', 13, 2), trigger: 'blur' }]
}
校验:
this.$refs['tableDataFrom'].validate((valid) => {
if (!valid) return false;
console.log('保存成功');
});
效果图: