Material Design Lite表格-添加行动态打断格式

Material Design Lite Table - Adding Rows Dynamically Breaks Format

本文关键字：动态 格式 添加行 Design Lite 表格 Material      更新时间：2023-09-26

这是使用材料设计lite:的复选框的标记

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox">
  <input type="checkbox" id="checkbox" class="mdl-checkbox__input" />
  <span class="mdl-checkbox__label">Checkbox</span>
</label>

问题是，的标签连接到输入id。

因此，当我动态添加一个新的复选框时，我还必须添加一个id。但我如何找到要添加的id？当我稍后要将这些行添加到数据库中时，这不是一个问题吗？

以下是工作示例：

http://codepen.io/anon/pen/QjNzzO

注意您添加的新任务的复选框

如前所述，您需要升级元素。您可以调用componentHandler.upgradeDom()而不是componentHandler.upgradeElement()。

http://codepen.io/pespantelis/pen/pjbvBL

Material Design Lite将在页面加载时自动注册并呈现所有标记有MDL类的元素。但是，在动态创建DOM元素的情况下，需要使用upgradeElement函数注册新元素。

要升级所有元素，请使用以下代码：

componentHandler.upgradeAllRegistered();

http://www.getmdl.io/started/index.html#dynamic

组件处理程序是如何工作的？

我的个人方法是创建一个组件。我有一个在这里工作的咖啡和翡翠

基本上，您需要调用componentHandler.upgradeElements(el)。上次我检查了一下，这还不够，因为它没有添加波纹效果，所以你还需要升级lastChild。请注意，如果我没有记错的话，componentHandler.upgradeElement(el)和componentHandler.upgradeElements(el)有一个不同之处，它们走得很深。

关于id的问题，您应该只使用$index。我更新了代码笔，这样它就解决了你的问题，我会回来帮助你处理复选框的样式(这不是最初的问题(。

http://codepen.io/anon/pen/dYMBqj?editors=101

将复选框添加到DOM后，需要调用componentHandler.upgradeElement(el)。我不熟悉vue.js，所以我不能建议所需的具体代码更改，但本文似乎已经找到了答案。
相关文章：