vue.js - v-data-table 对单元格的自定义

Question

我有一个名为“my-table”的组件，其中有一个 v-data-table。我有许多其他组件使用它通过传入自己的标题/数据来显示基本表格。

我想更进一步，并允许其他组件对单元格进行自定义。例如，也许一个组件希望特定列使用 v-icons 而不是文本。也许一个完全不同的组件希望一个单元格在单击时是可编辑的，等等。

在 vue 中解决这个问题的最佳方法是什么？我真的必须将 myTable 代码复制/粘贴到其他组件中并在那里修改吗？Vue 是否能够为该表注入具有特定规则的模板/组件，如果可以，是否有示例？似乎 v-html 无法处理所有必要的标签并最终剥离它们。有没有更好的方法我没有想到？

标签： vue.jsvuetify.js

Answer 1

您可以在组件上的命名插槽上设置条件（v-if）渲染，基本上是一个插槽设置来渲染您拥有的一组预定义代码，但它可以改变您传递给子组件的内容，或者在这种情况下您可以限制为要渲染的布尔值，作为道具传递给子组件。

请参阅：组件插槽

请参阅：命名槽

希望这可以帮助。