在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>
然而,这并没有占据上风。