diff.vue 2.11 KB
<template>
    <layout-body>
        <layout-filter>
            <filter-item :label="filterOptions.handleActions.label">
                <Select v-model.trim="filters.handleActions">
                    <Option v-for="option in filterOptions.handleActions.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </filter-item>
            <filter-item :label="filterOptions.handleStatus.label">
                <Select v-model.trim="filters.handleStatus">
                    <Option v-for="option in filterOptions.handleStatus.options"
                            :value="option.value"
                            :key="option.value">{{option.label}}</Option>
                </Select>
            </filter-item>
            <filter-item>
                <Button type="primary" @click="filterSearch">筛选</Button>
                <Button @click="clearFilter">清空条件</Button>
            </filter-item>
        </layout-filter>

        <layout-list>
            <Table border :columns="table.cols" :data="table.data"></Table>
            <Page :total="pager.total" :current="pager.current"
                  @on-change="pageChange" :page-size="20" show-total></Page>
        </layout-list>
    </layout-body>
</template>

<script>
import {filterFields, table} from './store';

export default {
    data() {
        return {
            self: this,
            filters: {
                handleActions: '',
                handleStatus: ''
            },
            filterOptions: filterFields,
            table: {
                cols: table.cols,
                data: []
            },
            pager: {
                total: 0,
                current: 1
            }
        };
    },
    created() {
    },
    methods: {
        clearFilter() {
            this.filters.handleActions = '';
            this.filters.handleStatus = '';
        },
        filterSearch() {

        },
        pageChange() {

        }
    },
};
</script>

<style lang="scss">
    .btn-row-space {
        margin-top: 10px;
    }
</style>