如何在Element UI的表格行中显示动态信息

2024-05-11 • 问答

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

<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'

其背后的原因是因为翻译。列的行显示的值实际上是存储翻译的变量。我尝试尝试使用范围来尝试更好地理解表，例如：

<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并且除了创建输入字段外什么都不做，但是数据似乎没有绑定到它。感谢您的帮助。

我刚刚发现我很弱智。道具是// This is the parent component where the 3 tables are implemented as // separate instances of <TopThings /> <template> ... <TopThings // this is the TopClicks implementation :sort-options="sortOptions.topClicks" /> ... <TopThings // this is the TopImpressions implementation :sort-options="sortOptions.topImpressions" /> ... <TopThings // this is the TopCTR implementation :sort-options="sortOptions.topCTR" /> ... </template> <script> components: { TopThings.vue,},data() { return { sortOptions: { topClicks: { enabled: true,initialSortBy: {field: 'clicks',type: 'desc'} },topImpressions: { ... },topCTR: { ... },}; },，所以在这一行：

data.attribute

我只需要添加：

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

我需要睡觉。无论如何，通过这种方式还可以执行以下操作：

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

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

希望它对某人有用。

如何在Element UI的表格行中显示动态信息

wqqweqe 回答：如何在Element UI的表格行中显示动态信息

大家都在问