vue中的样式插槽

时间:2017-11-08 16:41:14

标签: vue.js vuejs2 slots

在Index.vue中进行表调用:

 <utilization-table :title="table.title" :columns="table.columns" :rows="table.rows">
   <template scope="data>      
        <td class="th_normal">{{data.row.name}}</td>
   </template>
 </utilization-table>

表模板是UtilizationTable.vue:

<template>
<div>
  <h3 v-html="title"></h3>
    <table class="table table-striped table-hover">
       <thead>
        <tr>
          <th v-if="selectable" class="table-view-pf-select" aria-label="Select all rows">
            <label>
              <span class="sr-only">Select all rows</span>
              <input type="checkbox" @change="changeSelectAll">
            </label>
          </th>
          <th v-for="column in columns">{{column}}</th>
        </tr>
      </thead>
      <tbody>
        <utilization-table-row ref="row" v-for="(row, i) in rows" :key="i">
          <slot :row="row"></slot>
        </utilization-table-row>
      </tbody>
    </table>
</div>
</template>

使用Row作为UtilizationTableRow.vue:

<template>
  <tr role="row">
    <slot></slot>
  </tr>
</template>

它希望将表格中的第一个“td”设置为130px。由于它是一个插槽,我不知道该怎么做。

通常,如果我的表是

<table>
    <tr>
      <td>
      </td>
    </tr>
</table>

我可以这样做:

<style> table tr td:first-child, table tr td:first-child {
    width: 130px !important; 
} 
</style>

然而,这并没有占据上风。

0 个答案:

没有答案