uniapp 表格组件，冻结首行首列
2024-04-21 03:56:04
uniapp 表格组件，冻结首行首列
- 模板
- js
- css 部分样式需要放到 `App.vue` 里面才能生效
- 属性与方法
- 属性
- 列定义
- 按钮
- 方法
- 行样式
- 选择事件
- 翻页事件
- 使用组件
对
uni-table的封装
优点：自带样式，自带多选等功能
缺点：
1. 不能对checkbox的value进行赋值，选出来的选中行的index
2. 不能对checkbox在加载完表格后默认选中
3.checkbox不能设置默认禁用
模板
<template><!-- style:设置表格高度 表格内容区高度为 height-60，60是分页组件的高度--><view class="x-table-box" :style="{height:height}"><!-- 表格 --><uni-table @selection-change="chkchange" ref="table" :type="chk?'selection':''" class="x-table" stripe emptyText="暂无更多数据"><!-- 表头 --><uni-tr class="thead"><uni-thv-if="cols"v-for="x,i in Object.keys(cols)" :width="cols[x].width||120":class="{left0:!chk&&i==0,left5:chk&&i==0}">{{cols[x].title || x}}</uni-th><!-- 按钮列 --><uni-th v-if="btns" :width="btnswidth">操作</uni-th></uni-tr><!-- 内容 --><uni-tr v-for="x in list" :style="trstyle(x)"><uni-tdv-if="cols"v-for="c,i in Object.keys(cols)" :width="cols[c].width||120":class="{left0:!chk&&i==0,left5:chk&&i==0}"v-html="fmt(cols[c].fmt,x[c],x)":style="trstyle(x)"></uni-td><!-- 按钮列 --><uni-td :style="trstyle(x)" class="x-table-btns" v-if="btns" :width="btnswidth"><!-- 按钮 --><button @click="b.click(x)" :disabled="b.disabled?b.disabled(x):false" :class="b.class" :type="b.type" v-for="b in btns">{{b.text}}</button></uni-td></uni-tr></uni-table><!-- 分页 --><view class="uni-pagination-box"><uni-pagination show-icon :page-size="pagesize" :current="pageindex" :total="count" @change="fpage" /></view></view>
</template>js
export default {name: "x-table",props: {/*** 数据列表* */list: {type: Array,default: []},/*** 是否开启多选* 默认否* */chk: {type: Boolean,default: false},/*** 列定义* */cols:{type:Object,default:null},/*** 按钮列宽度* */btnswidth:{type:Number,default:100},/*** 按钮列表* 请根据按钮数量设置 按钮列宽度* */btns:{type: Array,default: []},/*** 行样式* 可以设置背景色或文字颜色来标记不同的数据状态* */trstyle:{type:Function,default:function(){}},/*** 多选选择时触发* */chkchange:{type:Function,default:function(){}},/*** 设置表格高度 css* */height:{type:String,default:'800px'},/*** 每页长度* */pagesize:{type:Number,default:20},/*** 起始页* */pageindex:{type:Number,default:1},/*** 查询数据总量* */count:{type:Number,default:0},/*** 翻页事件* */topage:{type:Function,default:function(){}}},data() {return {};},methods:{/*** 翻页事件* current=翻页后的页码* */fpage(e){console.log(e)this.topage(e.current);},/*** 单元格数据格式化* */fmt(f,v,r){if(f){return f(v,r);}return v;}}}css 部分样式需要放到 App.vue 里面才能生效
.x-table-btns button{height: 24px;line-height: 24px;font-size: 14px;display: inline-block;margin-right: 2px;}.x-table-box {width: 100%;background-color: #fff;height: 90%;overflow: auto;position: absolute;}.x-table{border-collapse: collapse;display: inline-block;overflow: auto;width: 100%;position: absolute;}.uni-table-scroll{height:calc(100% - 60px);}.uni-pagination-box{position: absolute;bottom: 0px;left: 0px;width: 100%;padding: 15px;box-sizing: border-box;}.x-table .thead {position: sticky;top: 0;z-index: 9;}.x-table th,.x-table td {box-sizing: border-box;background-color: #fff;}.x-table .checkbox {position: sticky;left: 0;z-index: 8;overflow: hidden;}.x-table .checkbox::before{content: "";position: absolute;right: -1px;top: -10px;height: 200%;width: 0.5px;box-shadow:0px 0px 5px #000;}.x-table tr {display: flex;}.x-table tr:hover,.x-table tr:hover td{background-color:#eee;}@media (min-width:768px) {.x-table-box {max-width: calc(100vw - 200px) !important;}.x-table .left5 {position: sticky;left:36px;border-right: 1px solid #eee;overflow: hidden;}.x-table .left5::before{content: "";position: absolute;right: -1px;top: -10px;height: 200%;width: 0.5px;box-shadow:0px 0px 5px #000;}}@media (max-width:768px){.x-table tbody{display: inline-block;width: 100%;}.x-table tr{flex-direction: column;background-color: #fff;border-bottom: #ccc;width: 100%;margin-bottom: 10px;}.x-table .thead{display: none;}.x-table th,.x-table td {border:none;width: 100%;}.x-table-btns{text-align: right;}.x-table-btns button{height:30px;line-height:30px;font-size: 14px;display: inline-block;margin-right:10px;}}
position: sticky;与上级元素position: absolute;可做到冻结
属性与方法
属性
| 名称 | 类型 | 描述 |
|---|---|---|
| list | Array | 数据列表 |
| cols | Object |
列定义，详细信息见下面列定义
|
| btns | Array |
按钮列表，请根据按钮数量设置—按钮列宽度，详细信息见下面按钮
|
| btnswidth | Number | 按钮列宽度 |
| chk | Boolean | 是否开启多选 默认否 |
| height | String | 设置表格高度 css |
| pagesize | Number | 每页长度 默认20 |
| pageindex | Number | 起始页 默认1 |
| count | Number | 查询数据总量 |
列定义
cols:{//字段名name:{title:"姓名",//表头width:100//列宽},//字段名phone:{title:"手机号",//表头width:150,//列宽/*** 格式化数据* */fmt(v,r){return '+86 '+r.phone;}},
}
按钮
btns:[{text:"编辑",//按钮文字class:"btn1",//附加样式type:"primary",//uniapp提供的按钮类型 蓝色primary/红色warn//设置按钮状态，返回true按钮可用，false按钮不可用disabled(r){// r=当前行数据return r.phone.indexOf('15')>-1;},//按钮单击事件click(r){// r=当前行数据}}
]方法
| 名称 | 类型 | 描述 |
|---|---|---|
| trstyle | Function |
行样式，可以设置背景色或文字颜色来标记不同的数据状态，详细信息见下面行样式
|
| chkchange | Function |
选择事件，详细信息见下面选择事件
|
| topage | Function |
翻页事件，详细信息见下面翻页事件
|
行样式
/**
* 判断数据状态，给行加上样式
**/
tablestyle(r){// r=当前行数据var style={style.background="#ff9999";};if(r.phone>17000000000){style.background="#ff66ff";}return style;
},选择事件
chkchange(v){// v.detail.index 当前选中的所有行console.log(v)
},
翻页事件
topage(e){//e=当前页this.pageindex=e;//查询数据this.getdata();
},
使用组件
<x-table :chkchange="chkchange" :trstyle="tablestyle" :btnswidth="200" :btns="btns" :list="table" :cols="cols" chk="true"height="800px":key="phone":pagesize="pagesize":count="count"chkchange="chkchange":topage="topage"
></x-table>
uniapp 表格组件，冻结首行首列相关推荐
- 关于VS2008的MFCGridCtrl的使用方法-冻结首行首列
1.新建基于Dilaog的MFC工程GridCtrlTest 2.从CodeProject上(http://www.codeproject.com/KB/miscctrl/gridctrl.aspx) ...
- js实现表格首行首列固定滑动
js+css实现table首行首列的冻结效果. 这个方案是把表格分为4块,首行首列不可滑动,利用onscroll 动态根据内容设置冻结首行首列内容. html <div id="lef ...
- HTML 锁定表格首行首列、拖拽表格列宽
摘自:http://s.yanghao.org/program/viewdetail.php?i=61717 因为与自己的实际情况有些不同,简单的改造了下...如果有版权问题,请留言... 锁定Tab ...
- CSS笔试题: 实现表格首行首列固定和自适应窗口
今天校招笔试题要求实现一个首行首列固定,宽度自适应窗口变化,但窗口缩小到一定宽度不能再缩小,出现水平滚动条- 当时我写错了,我一时想不起改用什么办法首行首列固定,用绝对定位,父亲相对定位-这样会有很多 ...
- html表格固定首行首列
html表格固定首行首列,适用于标准表格,格式如下: <div><table><tbody><tr><th></th></ ...
- 【Axure视频教程】固定中继器表格首行首列
今天教大家在Axure里如何制作固定中继器表格首行首列的原型模板,包括固定首行(标题行)和首列.固定首行(标题行)和前两列两个案例,因为是用中继器表格制作的,所以使用也非常方便,我们只需要在中继器表格 ...
- table固定列html5,css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...
- css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...
- axure中怎么做出固定首行_办公软件操作技巧078：如何在excel表格中冻结行与列...
在日常工作中,有时我们编辑的excel表格会比较大,数据内容有很多行和列,当我们拖动滚动条找到了离表头比较远的数据行或列的内容时,又看不到行或列表头标题信息了,这时再去处理数据信息就会感觉很不方便,如 ...
- 手机移动端加载更多（表格首行首列固定vue + vant完整版）
直接看效果图和实现的代码 <van-list:offset="60"v-model="isLoading":finished="finished ...
最新文章
- Silverlight学习笔记十七BingMap（六）之获取图片系统的图片信息ImageryService的应用...
- 基于OpenCV的实用图像处理操作
- socket阻塞与IO多路复用
- Apache+Tomcat +mod_proxy集群负载均衡及session
- ctr 平滑_CTR平滑的原理，包懂！！！附代码
- 《软件测试》第五次作业
- Windows 11的19个新功能
- iTerm2 快捷键收集
- Python :h5py 如何对dataset进行重新赋值？
- 【限时福利】COACKA免费试听@Days China，干货在这里！
- SPSS论证有这样的问题或错误？【SPSS 068期】
- Android电视远程桌面,【当贝市场】教你使用小米电视远程控制Windows桌面
- 魔方游戏程序设计制作（C语言）
- 简述什么是SQL注入，写出简单的SQL注入语句。
- 计算机sci论文怎么写,计算机学院陈端兵教授分享SCI论文写作方法
- html中点击按钮闪现,vue使用v-if v-show页面闪烁,div闪现的解决方法
- 情人节快到了，我部署了一套情侣头像小程序，并过审了
- ospf多区域原理和配置
- Ubuntu有线网络无法连接—有线网络连接图标变为灰色，无法点击
- **matlab中 isempty ( ) 函数用法**