将类别添加到广告位范围_JavaScript

我正在创建一个表组件，我想让我的用户能够添加自己的自定义<td>这要感谢一个插槽。 所以我有：

<tbody>
  <tr v-for="(item, key) in items">
    <slot :item=item">
      <td v-for="(header, headerKey) in variableHeaders"
        :class="{
            veryImportantClass: condition > 5,
        }">
        {{item.text}}
      </td>
    </slot>
  </tr>
</tbody>

由于此代码，我使用了该插槽：

<my-component
  :headers="headers"
  :items="items">
  <template slot-scope="prop">
    <td :class="{ aClassAddedByAUser: true }" v-for="(header, headerKey) in headers" ...>
      {{ prop.item.text }} with some text
    </td>
  </template>
</my-component>

问题是， veryImportantClass类对于我的组件是必需的，但我想避免要求用户在其创建的slot输入它（以降低复杂性）

由于此作用域，有没有一种方法可以将此类简单地添加到我的用户给定的所有<td> ？

您可以使用mounted()生命周期挂钩使用常规JavaScript函数添加类。 这是您可以无条件地将其添加到所有单元格的方法。 如果只需要将其添加到某些单元格中，请进行相应的调整。

mounted() {
    // wait a tick to ensure all child components have rendered
    this.$nextTick(() => {
        this.$el.querySelectorAll("td")
            .forEach(td => {
                td.classList.add("veryImportantClass");
            }
        }
    }
}

如果广告位内容要更改，则可能需要对updated()做类似的事情。

注意：这确实假定父对象在插槽中插入<td>元素，但不能保证。 但是由于那样会导致无效的HTML，因此您可以接受这种假设

将类别添加到广告位范围

问题描述

1楼