1.0.3 • Published 3 years ago
hjt-base-table v1.0.3
Table组件
Table组件
| 参数 | 类型 | 默认 | 说明 |
|---|---|---|---|
| getList | Function | 必填 | 获取列表的接口 |
| showPagination | Boolean | true <可选> | 是否显示分页 |
| formItems | Array | [] <可选> | 搜索条件，详细见下文 |
| otherParam | Object | {} <可选> | 除了搜索条件的其他需要传入getList的参数 |
| autoLoad | Boolean | true <可选> | 是否自动调用接口 |
| border | Boolean | false <可选> | 表格边框 |
| showSearchBtn | Boolean | true <可选> | 是否展示搜索按钮 |
| showResetBtn | Boolean | true <可选> | 是否展示重置按钮 |
| cacheParamKey | String | 空 <可选> | 缓存参数的key，传入从子页面返回列表会记录搜索条件，唯一值，建议传入页面地址 window.location.pathname |
以下为 formItems 的参数
| 参数 | 类型 | 默认 | 说明 |
|---|---|---|---|
| type | String | 必填<input, select, datePicker, checkbox> | 类型 |
| key | String | 必填 | 表单的key |
| label | String | 必填 | 表单的label |
| initValue | Any | <可选> | 默认值 |
| options | Array | []<可选> | type为select时的选择项 |
| optionLabelKey | String | <可选> | options的label |
| optionValueKey | String | <可选> | options的value |
| extra | Boolean | false <可选> | 是否为高级搜索 |
例子：
<template>
<BaseTable
ref="baseTable"
:get-list="getList"
show-reset-btn
:other-param="otherParam"
:form-items="formItems"
@onReset="update"
@sortChange="onSortChange"
>
<div slot="button" style="display: inline-block;">
<el-button
type="danger"
style="margin-left: 20px;"
>
其他按钮
</el-button>
</div>
<el-table-column
prop="user_id"
label="用户ID"
/>
<el-table-column
prop="days"
label="日期"
sortable="custom"
/>
</BaseTable>
</template>
<script>
import BaseTable from 'hjt-base-table';
export default {
components: {
BaseTable
},
data() {
getList: api.salesman.getSalesmanList,
otherParam: {
time_type: '',
},
cacheParamKey: window.location.pathname,
projectList: []
},
computed: {
formItems() {
return [
{
type: 'input',
key: 'keywords',
placeholder: '请输入ID/姓名/工作展示名/手机号',
style: {
width: '240px'
},
},
{
type: 'select',
key: 'project_id',
label: '楼盘名',
filterable: true,
remote: true,
remoteMethod: this.getProjects,
clearable: true,
placeholder: '请选择',
optionLabelKey: 'name',
optionValueKey: 'id',
options: this.projectList
},
{
type: 'select',
key: 'is_up',
label: '状态',
clearable: true,
initValue: '',
placeholder: '请选择',
options: [
{
name: '全部',
id: ''
},
{
name: '上架',
id: '1'
},
{
name: '下架',
id: '0'
},
],
optionLabelKey: 'name',
optionValueKey: 'id'
},
{
type: 'datePicker',
key: 'time',
datePickerType: 'daterange',
format: 'yyyy-MM-dd',
placeholder: '',
initValue: [],
extra: true,
},
];
}
},
methods: {
getProjects(e) {
api.salesman.getProjectList({
keyword: e || '',
page: 1,
size: 20
}).then(res => {
const { list = [] } = res.data;
this.projectList = list;
});
},
}
}
</script>