如何在元素 UI 的 Table 的行中显示动态信息

Question

所以，基本上我有一个这样的table。

<v-table :data="data">
  <v-table-column prop="data.attribute" label="Attribute">
  </v-table-column>
 </v-table>

但是我不想在列的行中显示 data.attribute，而是想做类似...

return data.attribute === x ? 'Attribute equals X' : 'Attribute doesn't equal X'

这背后的原因是因为翻译。该列的行显示的值实际上是存储翻译的变量。我试着用示波器做实验，试图理解 table 更好地做这样的事情：

<v-table-column prop="data.attribute" label="Attribute">
  <template slot-scope="scope">
    <input type="text" v-model="scope.row.attribute">
  </template>
</v-table-column>

Aaa，除了创建输入字段外什么也没做，但数据似乎没有绑定到它。感谢您的帮助。

Answer 1

我刚刚发现我是弱智。道具是data.attribute，所以在这一行：

<input type="text" v-model="scope.row.attribute">

我只需要补充：

<input type="text" v-model="scope.row.data.attribute">

我需要睡觉。无论如何，这样也可以做类似的事情：

<p>{{ scope.row.data.attribute }}</p>

就是这样，只要它在带有插槽作用域的模板内即可。

希望对大家有用。

如何在元素 UI 的 Table 的行中显示动态信息

How to show dynamic info in the rows of Element UI's Table

javascript

html

vue.js

element

element-ui