table不随屏幕改变尺寸问题

This commit is contained in:
mabo
2021-05-27 16:37:00 +08:00
parent 087ffe230d
commit 0df88e08e4
88 changed files with 5255 additions and 5397 deletions

View File

@@ -1,79 +1,73 @@
<template>
<div class="search">
<Row>
<Col>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="会员名称" prop="memberName">
<Input
type="text"
v-model="searchForm.memberName"
clearable
placeholder="请输入会员名称"
style="width: 200px"
/>
</Form-item>
<Form-item label="商品名称" prop="goodsName">
<Input
type="text"
v-model="searchForm.goodsName"
clearable
placeholder="请输入商品名"
style="width: 200px"
/>
</Form-item>
<Form-item label="评价" prop="orderStatus">
<Select v-model="searchForm.grade" placeholder="请选择" clearable style="width: 200px">
<Option value="GOOD"></Option>
<Option value="MODERATE">中评</Option>
<Option value="WORSE">差评</Option>
</Select>
</Form-item>
<Form-item label="评论日期">
<DatePicker
v-model="selectDate"
type="datetimerange"
format="yyyy-MM-dd HH:mm:ss"
clearable
@on-change="selectDateRange"
placeholder="选择起始时间"
style="width: 200px"
></DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
<Button @click="handleReset" class="search-btn">重置</Button>
</Form>
</Row>
<Row class="padding-row">
<Table
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
sortable="custom"
@on-sort-change="changeSort"
@on-selection-change="changeSelect"
></Table>
</Row>
<Row type="flex" justify="end" class="page">
<Page
:current="searchForm.pageNumber"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[10, 20, 50]"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
</Col>
</Row>
<Card>
<Row @keydown.enter.native="handleSearch">
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
<Form-item label="会员名称" prop="memberName">
<Input
type="text"
v-model="searchForm.memberName"
clearable
placeholder="请输入会员名称"
style="width: 200px"
/>
</Form-item>
<Form-item label="商品名称" prop="goodsName">
<Input
type="text"
v-model="searchForm.goodsName"
clearable
placeholder="请输入商品名"
style="width: 200px"
/>
</Form-item>
<Form-item label="评价" prop="orderStatus">
<Select v-model="searchForm.grade" placeholder="请选择" clearable style="width: 200px">
<Option value="GOOD">好评</Option>
<Option value="MODERATE">中评</Option>
<Option value="WORSE"></Option>
</Select>
</Form-item>
<Form-item label="评论日期">
<DatePicker
v-model="selectDate"
type="datetimerange"
format="yyyy-MM-dd HH:mm:ss"
clearable
@on-change="selectDateRange"
placeholder="选择起始时间"
style="width: 200px"
></DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
<Button @click="handleReset" class="search-btn">重置</Button>
</Form>
</Row>
<Table
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
sortable="custom"
@on-sort-change="changeSort"
@on-selection-change="changeSelect"
></Table>
<Row type="flex" justify="end" class="page">
<Page
:current="searchForm.pageNumber"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[10, 20, 50]"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
<Modal
:title="modalTitle"
v-model="modalVisible"