Как использовать опору в качестве модели в таблице элементов пользовательского интерфейса, Vuejs? - PullRequest
0 голосов
/ 28 апреля 2020

В настоящее время я делаю небольшую таблицу простых вычислений, но при использовании 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...