请选择 进入手机版 | 继续访问电脑版
热门问答
更多

AVM框架 封装数据表格组件

[复制链接]
wuliyuye 发表于 2022-7-11 16:16:29
用以展示基础表格数据的组件。

组件的核心功能点是在数据展示的时候,用到了2个v-for循环,第一层循环是数据对象的循环,然后嵌套列名的对象,通过列名中的key值在数据对象中查询对应的数据,这样就保证了在数据对象与列名对象顺序打乱的情况下也可以把数据对应起来,并能够在列名没有对应的数据的时候进行特殊处理。

组件文件
easy-data-grid.stml
  1. <template>
  2.         <view class="easy-data-grid_contanier">
  3.                 <view class="easy-data-grid_header">
  4.                         <view class="easy-data-grid_header-item" v-for="(item, index) in columns">
  5.                                 <text class="easy-data-grid_header-item-content">{item.lable}</text>
  6.                         </view>
  7.                 </view>
  8.                 <scroll-view class="easy-data-grid_tbody" scroll-y>
  9.                         <view class="easy-data-grid_tbody-item" v-for="(item, index) in dataList">
  10.                                 <view class="easy-data-grid_tbody-item-columns" v-for="(itemcol,indexcol) in columns">
  11.                                         <text class="easy-data-grid_tbody-item-content" v-if="item[itemcol.key]">{item[itemcol.key]}</text>
  12.                                         <text class="easy-data-grid_tbody-item-content" v-else>/</text>
  13.                                 </view>
  14.                         </view>
  15.                 </scroll-view>
  16.         </view>
  17. </template>
  18. <script>
  19. export default {
  20.         name: 'easy-data-grid',
  21.         props:{
  22.                 columns:Object,
  23.                 dataList:Object
  24.         },
  25.         data() {
  26.                 return{
  27.                 }
  28.         },
  29.         methods: {

  30.         }
  31. }
  32. </script>
  33. <style>
  34.         .easy-data-grid_header{
  35.                 flex-flow: row nowrap;
  36.                 justify-content: space-between;
  37.                 align-items: center;
  38.                 width: 100%;
  39.         }
  40.         .easy-data-grid_header-item{
  41.                 background-color: #cccccc;
  42.                 text-align: center;
  43.                 justify-content: center;
  44.                 flex-flow: row nowrap;
  45.                 padding: 5px;
  46.                 width: 20%;
  47.         }
  48.         .easy-data-grid_header-item-content{
  49.                 font-size: 15px;
  50.                 font-weight: bolder;
  51.         }
  52.         .easy-data-grid_tbody{
  53.                 height: 200px;
  54.         }
  55.         .easy-data-grid_tbody-item{
  56.                 flex-flow:  row nowrap;
  57.                 justify-content: center;
  58.                 align-items: center;
  59.                 border-bottom: 0.5px solid #cccccc;       
  60.                 padding: 5px 0;
  61.                 width: 100%;
  62.         }
  63.         .easy-data-grid_tbody-item-columns{
  64.                 flex-flow:  row nowrap;
  65.                 text-align: center;
  66.                 width: 20%;
  67.                 justify-content: center;
  68.         }
  69.         .easy-data-grid_tbody-item-content{
  70.                 font-size: 14px;
  71.         }
  72. </style>
复制代码
组件使用

demo-easy-data-grid.stml

  1. <template>
  2.         <view class="page">
  3.                 <safe-area></safe-area>
  4.                 <easy-data-grid
  5.                         :columns={columns}
  6.                         :dataList={dataList}
  7.                 ></easy-data-grid>       
  8.         </view>
  9. </template>
  10. <script>
  11. import '../../components/easy-data-grid.stml'
  12. export default {
  13.         name: 'demo-easy-data-grid',
  14.         apiready(){//like created

  15.         },
  16.         data() {
  17.                 return{
  18.                         columns:[
  19.                                         {
  20.                                                 lable: '姓名',
  21.                                                 key: 'name',
  22.                                         },{
  23.                                                 lable: '年龄',
  24.                                                 key: 'age',
  25.                                         },{
  26.                                                 lable: '性别',
  27.                                                 key: 'sex',
  28.                                         },{
  29.                                                 lable: '职业',
  30.                                                 key: 'office',
  31.                                         },{
  32.                                                 lable: '学历',
  33.                                                 key: 'edu',
  34.                                         }
  35.                                 ],
  36.                                 dataList:[
  37.                                         {name:'张一',age:'12',sex:'男',office:'技术工程师',edu:'大学本科'},
  38.                                         {name:'王三',age:'20',sex:'男',office:'车间工人',edu:'博士'},
  39.                                         {name:'张二',age:'30',sex:'男',office:'销售人员',edu:'本科'},
  40.                                         {office:'技术专家',name:'李一',age:'18',sex:'女',edu:'专科'},
  41.                                         {age:'12',sex:'男',name:'张三',office:'集团老板',edu:'小学'},
  42.                                         {name:'张四',sex:'男',age:'20'},
  43.                                         {sex:'男',name:'张五',age:'30'},
  44.                                         {name:'张刘一',age:'18',sex:'女'}
  45.                                 ]
  46.                 }
  47.         },
  48.         methods: {

  49.         }
  50. }
  51. </script>
  52. <style>
  53.         .page {
  54.                 height: 100%;
  55.                 background-color: #f0f0f0;
  56.         }
  57. </style>
复制代码
组件示例

本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X

1条回复

ColdKiller 转正司机 1364Y币
可以支持左侧列和表头固定么
您需要登录后才可以回帖 登录

本版积分规则