uniapp uni-table固定列
时间: 2025-04-20 13:32:10 浏览: 83
### 实现 UniApp 中 uni-table 组件的固定列
在 UniApp 的 `uni-table` 组件中设置固定列可以通过特定属性来完成。对于希望固定的某一列,可以利用 `fixed` 属性[^2]。
此属性接受字符串参数 `"left"` 或者 `"right"` 来指定该列应该相对于表格左侧还是右侧保持静止。下面是一个简单的例子说明如何定义带有固定首列的表格:
```html
<template>
<view>
<!-- 表格 -->
<uni-table border stripe emptyText="暂无更多数据">
<uni-tr>
<uni-th width="100" fixed="left">编号</uni-th> <!-- 这里设置了固定左列 -->
<uni-th>姓名</uni-th>
<uni-th>职位</uni-th>
<uni-th>年龄</uni-th>
<uni-th>地址</uni-th>
<uni-th width="180" fixed="right">操作</uni-th> <!-- 同样这里设置了固定右列 -->
</uni-tr>
<uni-tr v-for="(item,index) in tableData" :key="index">
<uni-td>{{ item.id }}</uni-td>
<uni-td>{{ item.name }}</uni-td>
<uni-td>{{ item.position }}</uni-td>
<uni-td>{{ item.age }}</uni-td>
<uni-td>{{ item.address }}</uni-td>
<uni-td><button @click="handleClick(item)">编辑</button></uni-td>
</uni-tr>
</uni-table>
</view>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: '1', name: '张三', position: '前端工程师', age: '27', address: '北京市海淀区' },
// 更多的数据...
]
};
},
methods: {
handleClick(row){
console.log('编辑:', row);
}
}
};
</script>
```
上述代码片段展示了创建一个具有固定左边和右边栏目的表格的方法,在实际开发过程中可根据需求调整哪一列为固定列以及其宽度等样式特性。
#### 注意事项
当使用 `position:sticky` CSS 属性实现固定效果时需要注意不同浏览器的支持情况;不过在这里由于是通过框架自带的功能而非纯CSS方式达成目标,则无需过多考虑兼容性问题。
阅读全文
相关推荐
















