对
uni-table的封装
优点:自带样式,自带多选等功能
缺点:
1. 不能对checkbox的value进行赋值,选出来的选中行的index
2. 不能对checkbox在加载完表格后默认选中
3.checkbox不能设置默认禁用
{{cols[x].title || x}}操作
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;}}}
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();
},