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>