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 |
否 |
小列表按钮显示 |
methods(需要绑定在组件上):
| 方法名 |
参数 |
描述 |
| show-list-data |
选中的页数 |
列表页分页时获取当前页数 |
| handle-selection |
选中表格数据 |
批量删除时使用 |
| handle-selection-small |
选中小列表数据 |
小列表和列表页数据联动时调用 |
另需特殊情况的方法名( 如有按钮,需父组件有这些方法名):
| 方法名 |
参数 |
描述 |
| addFun |
调用新增模态框的方法 |
|
| delInfo |
调用删除模态框的方法 |
|
| treeClick |
调用收缩树控件方法 |