LamboListPage 列表组件

介绍

LamboListPage 是一个列表数据组件，基于vant实现，用于列表页面。查询区域可用插槽扩展查询表单。列表元素用插槽自定义显示内容。列表行支持批量选择和操作。

引入

import Vue from 'vue';
import LamboListPage from '@lambo-design-mobile/lambo-list-page';

Vue.use(LamboListPage);

代码演示

基础用法

<LamboListPage :searchForm="searchForm" :params="params" :showFilter="true" :url="'/ibp-upms-server/manage/demoUser/list'" :useBatch="true"
        listTitle="用户列表" placeholder="请输入用户关键字" >
        <template #filter>
            <van-field
                v-model="searchForm.userId"
                label="用户帐号"
                placeholder="请输入用户帐号"
                :rules="[{ required: true}]"
            />
            <van-field
                v-model="searchForm.userName" 
                label="用户名称"
                placeholder="请输入用户名称"
                :rules="[{ required: false, }]"
            />
        </template>
            
        <template #row="{ item, isBatching, reload }">
            <van-cell-group style="margin: 10px;">
                <van-cell :title="item.userName"  size="large" ><a style="color: #0e78ff;">{{ item.status }}</a></van-cell>
                <van-cell title="编码" :value="item.userId" />
                <van-cell title="状态" :value="item.status" />
                <van-cell style="border-top: 2px solid #f7f8fa;" v-show="!isBatching">
                    <div style="float: right;">
                            <van-button plain color="#0e78ff" size="small" style="margin-left: 10px;" @click="delItem(item,reload)">删除</van-button>
                    </div>
                </van-cell>
            </van-cell-group>
        </template>
       <template #batch="{ itemCheckList ,reload }">
            <van-button icon="passed"  plain color="#0e78ff" size="small" style="margin-left: 10px;" @click="auditItem(itemCheckList,reload)">启用</van-button>
            <van-button icon="warning-o" plain color="#0e78ff" size="small" style="margin-left: 10px;" @click="denyItem(itemCheckList,reload)">停用</van-button>
       </template>
         
    </LamboListPage>

     import { Toast } from 'vant';
     import LamboListPage from '../src/list-page.vue';

    export default{
        components:{LamboListPage},
        data(){
            return {
                params: { paraSearch: '' },
                searchForm:{
                    "userId": "",
                    "userName": "",
                },
                
            }
        },
        methods:{
            delItem(itemCheckList,reload){
                console.log('stopItem',itemCheckList);
                Toast.success('删除成功');
                reload();
            },
            auditItem(itemCheckList,reload){
                console.log('stopItem',itemCheckList);
                Toast.success('批量审核成功');
                reload();
            },
            denyItem(itemCheckList,reload){
                console.log('stopItem',itemCheckList);
                Toast.success('批量驳回成功');
                reload();
            },
        }
    }

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|-----------------------------|----------|-----|------| | url | 服务地址,实现分页请求，分页参数为startNum与endNum，为当前页面数据起止行号，startNum从1开始 ，查询输入框对应查询参数名为searchVal | string | - | - | | params | 隐式查询参数,json对象，key-value以键值对形式用到请求参数中 | object | - | - | | searchForm | 查询输入框旁边的过滤框表单对象，与插槽filter搭配使用，插槽中表单控件的name在searchForm声明 | object | | - | | showFilter | 是否使用查询过滤框，为true时搭配searchForm与插槽filter | boolean | false | - | | autoSearch | 初始化时是否自动查询数据 | boolean | false | - | | rowNum | 分页大小 | number | 10 | - | | successText | 下拉刷新成功提示文字 | string | 刷新成功 | - | | placeholder | 查询输入框placeHolder | string | 请输入搜索关键词 | - | | useBatch | 是否使用批量操作 ，搭配插槽 batch使用 | boolean | false | - | | batchColWidth | 批量选择状态时的多选框列的宽度，取值范围为1-24 | number | 4 | - | | maxCheckNum | 最大选择行数 | number | 999999 | - | | listTitle | 列表标题 | string | | - |

Slots

| 名称 | 说明 | |------|-----------------------------| | row | 用于渲染行数据，插槽内可用变量item, isBatching, reload。item为行数据，isBatching表示是否处于批量选择状态，reload为列表刷新函数 | | filter | 用于渲染查询过滤框表单，搭配 searchForm使用| | batch | 用于渲染批量选择状态时页面底部显示的按钮区域 ，插槽内可使用变量为itemCheckList与reload。itemCheckList为已选择行对象的数组,reload为列表刷新函数 |