uniapp 表格组件，冻结首行首列

• 模板
• js
• css 部分样式需要放到 `App.vue` 里面才能生效
• 属性与方法
• • 属性
  • • 列定义
    • 按钮
  • 方法
  • • 行样式
    • 选择事件
    • 翻页事件
• 使用组件

对 uni-table 的封装
优点：自带样式，自带多选等功能
缺点：
1. 不能对 checkbox 的 value 进行赋值，选出来的选中行的 index
2. 不能对 checkbox 在加载完表格后默认选中
3. checkbox 不能设置默认禁用

模板

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; 可做到冻结

属性与方法

属性

列定义

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=当前行数据}}
]

方法

行样式

/**
* 判断数据状态，给行加上样式
**/
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();
},

使用组件