1.0.0 • Published 5 years ago
zeesuu-searchlist v1.0.0
mutong-ketang-searchlist
页面级别的列表组件,包含基本的数据渲染,事件响应等.
安装:
$ npm i mutong-ketang-searchlist@latest -S
使用:
全局使用
在 main.js 中
import MTSearchList from 'mutong-ketang-searchlist';
Vue.use(MTSearchList);
页面中
<template>
<div class="dashboard-container">
<search-list
<!-- 列表请求地址(必选) -->
:api-url="API.SUB_PLATFORM.LIST"
<!-- 搜索框配置(可选) -->
:option="searchOpt"
<!-- 搜索框每行控件数目(可选) -->
:itemPerRow="8"
<!-- 设置table的rowkey(可选) -->
:rowKey="id"
<!-- 设置默认翻页参数(可选) -->
:pagination="pagination"
<!-- 请求成功后回调(可选), 参数为返回的列表数据 -->
:query-success="querySuccess"
<!-- 请求之前处理函数(可选), 参数为 { searchInfo: {}}, 可以设置默认搜索参数 -->
:before-query="beforeQuery"
<!-- 多选数据响应(可选) -->
@selection-change="selectionChange"
<!-- 双击一行数据响应(可选) -->
@table-row-dbclick="dbClicked"
>
<!-- 如果要多选,可以第一个列表现增加单选框(可选) -->
<el-table-column type="selection"></el-table-column>
<!-- 列表项 -->
<el-table-column prop="title" width="400" label="公司名称"></el-table-column>
<el-table-column prop="status" label="公司名称"></el-table-column>
<el-table-column prop="author" label="作者名称"></el-table-column>
<el-table-column prop="display_time" label="作者名称"></el-table-column>
<el-table-column prop="pageviews" label="作者名称"></el-table-column>
<el-table-column label="操作">
<!-- 获取每行数据 -->
<template slot-scope="scope">
<el-button type="primary" size="mini">{{ scope.row.id }}</el-button>
</template>
</el-table-column>
<!-- 查询按钮前的位置插槽 -->
<div slot="btn-before" class="btn-before">
<el-button type="success" size="mini">before</el-button>
</div>
<!-- 重置按钮后的位置插槽 -->
<div slot="btn-after" class="btn-after">
<el-button type="info" size="mini">after</el-button>
</div>
<!-- 按钮和表格之间的位置插槽 -->
<div slot="tab-before" class="tab-before">
说明文字说明文字说明文字说明文字说明文字
</div>
</search-list>
</div>
</template>
<script>
import { API } from '@/config';
export default {
name: 'SubManage',
data() {
return {
searchOpt: [
{
// 控件类型字符串, 控件需要被注册
type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
// 搜索表单字段名
name: 'id',
// placeholder
label: '平台ID',
},
{
type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
name: 'time',
label: '平台ID',
conf: {
type: 'daterange',
},
},
],
pagination: {
// 当前页面
page_no: 1,
// 每页数量
page_size: 10,
// 总页数
total: 0,
// 请求标志位
loading: false,
},
API,
};
},
methods: {
querySuccess(list) {
return list;
},
beforeQuery(val) {
const { searchInfo } = val;
searchInfo.id = '123';
},
selectionChange(selectedList) {
console.log(selectedList);
},
dbClicked(dbRow) {
console.log(dbRow);
},
},
};
</script>
Dependencies
- this.\$http
此组件依赖调用环境的 this.\$http 是用于发起请求的对象实例,比如 axios.
没有的话,则无法完成远程调用.
- Element-ui
此组件依赖调用环境需要安装 Element-ui
1.0.0
5 years ago