如何为表格上的嵌套数据设置有效的道具路径 - Element UI - Vue JS答案

【问题标题】：How to set a valid prop path for nested data on a table - Element UI - Vue JS如何为表格上的嵌套数据设置有效的道具路径 - Element UI - Vue JS
【发布时间】：2018-10-05 15:07:03
【问题描述】：

我正在尝试验证一个表单，其中一部分使用 element-ui 在表格中表示。但我无法将有效的道具传递给 el-form-item。

数据模型看起来像这样。

form: {
    invoices: [
        {
            amount: '',
            items: [{ name: '', value: '' }]
        }
    ]
}

在 html 部分我有这样的东西：

<template v-for="(invoice, index) in form.invoices">
    <el-form-item :prop="`invoices.${index}.amount`" :rules="rules.invoiceAmount">
        <el-input/>
    </el-form-item>
    <el-table :data="invoice.items">
        <el-table-column prop="name">
            <template scope="scope" slot-scope="scope">
                <el-form-item :prop="`invoices.${index}.items.${scope.$index}.name`" :rules="rules.items">
                    <el-input/>
                </el-form-item>
            </template>
        </el-table-column>
    </el-table>
</template>

第二个<el-form-item> 因错误未验证

“错误：请传输有效的道具路径到表单项！”

我也尝试将以下内容作为道具传递

items.${scope.$index}.name

但这也没有用。有什么想法吗？

【问题讨论】：

invoices[index].amount?
@destoryer 发票金额验证正常。这个:prop="invoices.${index}.amount" 引发错误的是表中的项目名称字段。所以基本上该项目名称的路径类似于 invoices.index.items.itemIndex.item 对吧？
我不明白你为什么使用字符串模板文字。
我会将invoices.${index}.items.${scope.$index}.name 替换为invoice.items[index].name。
根据他们的文档，prop 实际上是一个字符串，它代表您所指模型的 key （不是实际值）。如果我传入您的建议，则不会显示错误，但仍然不存在验证。对于固定道具，验证有效，所以它只是路径问题

标签： vue.js vuejs2 frontend vue-component element-ui

【解决方案1】：

正确的路径是invoices[${index}].items[${scope.$index}].name

【讨论】：