175  
查询码:00000488
列表页组件风格2 (rview-c)
作者: 郁冲冲 于 2019年12月26日 发布在分类 / 人防组 / 人防前端 下,并于 2019年12月26日 编辑
列表页组件风格2 rview-c

应用场景概述:
    应用于具有增删改查的系统列表页






使用方法:

    cnpm install rview-c --save

使用组件
    
  <TableListCom
            :listName="listName"
            :pageTitle="pageTitle"
            :columnsName="columnsName"
            :columnsNameSmall="columnsNameSmall"
            :listDateSmall="listDateSmall"
            :listDate="listDate"
            :modalTitle="modalTitle"
            :pageTotal="pageTotal"
            :tableLoading="tableLoading"
            :pageSize="listParam.pageSize"
            :addButtonShow="addButtonShow"
            :delButtonShow="delButtonShow"
            :moreButtonShow="moreButtonShow"
            :treeButtonShow="treeButtonShow"
            :searchButtonShow="searchButtonShow"
            :tableButtonShow="tableButtonShow"
            @show-list-data="showListData"
            @handle-selection="handleSelection"
            @handle-selection-small="handleSelectionSmall"
            :modalClass="modalClass"
          >
            <div slot="shift-conditions" class="searchtop">
              <ul>
                <li class="item">
                  <label>用户名称</label>
                  <Input
                    v-model="formSearch.codeName"
                    placeholder="请输入名称"
                    clearable
                    style="width: 280px"
                  />
                </li>
                <li class="item">
                  <label>使用状态</label>
                  <Select v-model="formSearch.status" placeholder="请选择使用状态" clearable>
                    <Option v-for="[key,value] in dic_data[0].data" :value="key" :key="key">{{value}}</Option>
                  </Select>
                </li>
                <li class="item">
                  <Button type="primary" icon="ios-search" class="search" @click="searchInfo">搜索</Button>
                  <Button type="primary" icon="md-refresh" class="reset" @click="resetInfo">重置</Button>
                </li>
              </ul>
            </div>
            <div></div>
          </TableListCom>
  
  

使用解释说明:  

 props:

参数
类型
是否必填
描述
listName
String

列表样式名称
columnsName
Array

列表表头
listDate
Array

列表数据
pageTotal
Number
列表总数据值
pageSize
Number

列表每页条数
tableLoading
Boolean

列表是否加载
tableHeight
Number

列表表格高度
columnsNameSmall
Array

按钮小列表表头
listDateSmall
Array

按钮小列表数据
addButtonShow
Boolean

新增按钮显示
delButtonShow
Boolean

删除按钮显示
moreButtonShow
Boolean

更多按钮显示
treeButtonShow
Boolean

树形收缩按钮显示
searchButtonShow
Boolean

搜索收缩按钮显示
tableButtonShow
Boolean

小列表按钮显示


    三个插槽:
  • 左边按钮插槽:operate-buttons-left
  • 右边按钮插槽:operate-buttons-right
  • 顶部搜索框内容:shift-conditions

 methods(需要绑定在组件上):

方法名 
参数   
描述   
 show-list-data 
选中的页数
列表页分页时获取当前页数
handle-selection 
选中表格数据
批量删除时使用
handle-selection-small
选中小列表数据
小列表和列表页数据联动时调用


另需特殊情况的方法名( 如有按钮,需父组件有这些方法名):

方法名 
参数 
描述  
addFun 

调用新增模态框的方法
delInfo 

调用删除模态框的方法
treeClick 

调用收缩树控件方法





 推荐知识

 历史版本

修改日期 修改人 备注
2019-12-26 14:11:16[当前版本] 郁冲冲 1.1.1

知识分享平台 -V 4.8.7 -wcp