更新记录
3(2021-01-23) 下载此版本
上一个版本使用的是tdList中的数据(对象数组),自动遍历每一个对象的每一个属性值;
这个版本可以自定义使用上一个版本的方式或者自己自定义每列数据的对象值。
简单来说就是提供两种遍历方式:
- 自动遍历对象数组中的每一个对象的属性值填入表格;
- 遍历对象书中的每一个对象的自定义属性值;
使用示例:
<cusTable :thList="thList" :tdList="tdList" :tdData="tdData" :useCusTdList="false"></cusTable>
<script>
export default {
data() {
return {
thList: ['姓名','年龄','性别'],//表头
tdList: ['name','age','sex'], //自定义属性名
tdData: [{name:'张三',age:'18',sex:"男"}]
};
}
}
</script>
2(2021-01-21) 下载此版本
修改部分bug
1(2021-01-21) 下载此版本
说明:使用scroll-view制作的简易table,主要实现了表格的横向滚动,单元格文本内容溢出换行,简单封装了一下方便使用
该插件部分样式借鉴: 黄河爱浪的表格插件样式
开始就是想找一个使用,结果没找到,只好做一个。
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
<cusTable :thList="thList" :tdList="tdList"></cusTable>
<script>
import cusTable from '../../components/table/cusTable.vue'
export default {
components:{
cusTable
},
data() {
return {
thList:['表头1','表头2','表头3'],
tdList:[{name:'张三',age:'18',sex:'男'}],
}
},
onLoad() {
},
mounted() {
},
methods: {
}
}
</script>