В настоящее время я делаю небольшую таблицу простых вычислений, но при использовании el-таблицы у меня возникают сложности, поскольку в каждой строке есть el-select и вводится эта таблица, которую я заполняю следующими данными (например, 1 данные)
in data()
:
tableData: [
{
title: 'Per Conveyance',
limit: [
{
value: 10000,
label: "$10,000"
},
{
value: 20,
label: "Q20"
},
],
rate: 0,
premium: 0,
model:'', // here I think the prop should go for each row my prop: prop.cargo.value1
modelRate:'',// here I think the prop should go for each row my prop: prop.cargo.rate1
typeFill
}
],
В таблице для каждой строки я сделал v-model = "scope.row.model", но это будет иметь свойство объект tableData как модель, и мне нужно, чтобы полученная реквизита была моделью, то есть prop.car go .value1 ... value2 ... value3 и т. д. для каждой строки или в соответствии с модель, которую я хочу назначить.
<el-table
:data="tableData"
border
show-summary
style="width: 100%">
<el-table-column
prop="name"
label="Coverage">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.title }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="Limit">
<template slot-scope="scope">
<el-select
placeholder="Select"
v-model="scope.row.model"
@change="selectLimit(scope.$index, tableData, scope.row)">
<el-option
v-for="(cd, st1, index) in scope.row.limit"
:key="index"
:label="cd.label"
:value="cd.value">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
prop="name"
label="Rate">
<template slot-scope="scope">
<input
type="text"
class="masked align-left"
v-model="scope.row.modelRate"
v-mask="{alias: 'decimal', digits:2}"
@change="changeRate(scope.$index, tableData, scope.row)"
maxlength="4"/>
</template>
</el-table-column>
<el-table-column
prop="name"
label="Premium">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.premium }}</span>
</template>
</el-table-column>
</el-table>