Vuetify：复选框的表格行

Question

我正在使用vuetify，并尝试使用数据表或简单表来显示复选框行和几个文本字段。

赞：

但是，当我使用v-simple-table时，所有复选框和字段都有自己的行；打破桌子。

<v-form>
	<h3>Shifts:</h3>
	<v-simple-table>
		<thead>
		<tr>
			<th>Su</th><th>M</th><th>T</th><th>W</th><th>Th</th><th>F</th><th>Sa</th><th>From:</th><th>To:</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>
				<v-checkbox></v-checkbox>
			</td>
			<td>
				<v-checkbox></v-checkbox>
			</td>
			<td>
				<v-checkbox></v-checkbox>
			</td>
			<td>
				<v-checkbox></v-checkbox>
			</td>
			<td>
				<v-checkbox></v-checkbox>
			</td>
			<td>
				<v-checkbox></v-checkbox>
			</td>
			<td>
				<v-checkbox></v-checkbox>
			</td>
			<td>
				<v-text-field value="9:00"></v-text-field>
			</td>
			<td>
				<v-text-field value="22:00"></v-text-field>
			</td>
		</tr>
		</tbody>
	</v-simple-table>
</v-form>

将v-simple-table更改为table可以为我提供正确的布局。

我不介意使用数据表，但我没有找到一种方法来使用一行复选框而不是一行数据文本。

Answer 1

  

v-simple-table组件是一个简单的包装器组件，它围绕    元件。在组件内部，您可以使用所有常规   表元素，例如<thead>，<tbody>，<tr>等。

v-simple表为您提供了一些无需编程的额外选项，例如固定标头或密集格式。

因此，当您使用v-simple-table时，您仍然必须定义表