vue 怎么固定第一列的表格值
时间: 2023-04-03 19:01:31 浏览: 79
你可以使用 Vue 的表格组件,通过设置 fixed 属性来固定第一列的表格值。具体实现可以参考以下代码:
<template>
<div>
<table>
<thead>
<tr>
<th :style="{ width: columnWidths[] + 'px', position: 'sticky', left: }">第一列</th>
<th :style="{ width: columnWidths[1] + 'px' }">第二列</th>
<th :style="{ width: columnWidths[2] + 'px' }">第三列</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableData" :key="index">
<td>{{ item.column1 }}</td>
<td>{{ item.column2 }}</td>
<td>{{ item.column3 }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ column1: '值1', column2: '值2', column3: '值3' },
{ column1: '值4', column2: '值5', column3: '值6' },
{ column1: '值7', column2: '值8', column3: '值9' }
],
columnWidths: [100, 200, 300]
}
}
}
</script>