mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-21 18:35:53 +08:00
table不随屏幕改变尺寸问题
This commit is contained in:
mabo
@@ -1,44 +1,38 @@
|
||||
<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"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="店铺名称" prop="storeName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.storeName"
|
||||
placeholder="请输入店铺名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="创建时间" prop="createTime">
|
||||
<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>
|
||||
</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"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="店铺名称" prop="storeName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.storeName"
|
||||
placeholder="请输入店铺名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="创建时间" prop="createTime">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -246,22 +246,20 @@
|
||||
</Form>
|
||||
</Row>
|
||||
<div style="min-height: 180px">
|
||||
<Row class="padding-row">
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="orderColumns"
|
||||
:data="orderData"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="orderChangeSort"
|
||||
>
|
||||
<!-- 订单详情格式化 -->
|
||||
<template slot="orderSlot" slot-scope="scope">
|
||||
<a @click="$router.push({name: 'order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
|
||||
</template>
|
||||
</Table>
|
||||
</Row>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="orderColumns"
|
||||
:data="orderData"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="orderChangeSort"
|
||||
>
|
||||
<!-- 订单详情格式化 -->
|
||||
<template slot="orderSlot" slot-scope="scope">
|
||||
<a @click="$router.push({name: 'order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<Row type="flex" justify="end" class="page" style="margin-top: 10px">
|
||||
<Page
|
||||
@@ -349,44 +347,42 @@
|
||||
</Form>
|
||||
</Row>
|
||||
<div style="min-height: 180px">
|
||||
<Row class="padding-row">
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="refundGoodsOrderColumns"
|
||||
:data="refundGoodsOrderData"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="refundGoodsOrderChangeSort"
|
||||
>
|
||||
<!-- 商品栏目格式化 -->
|
||||
<template slot="goodsSlot" slot-scope="scope">
|
||||
<div style="margin-top: 5px;height: 80px; display: flex;">
|
||||
<div style="">
|
||||
<img :src="scope.row.goodsImage" style="height: 60px;margin-top: 3px">
|
||||
</div>
|
||||
|
||||
<div style="margin-left: 13px;margin-top: 3px;">
|
||||
<div class="div-zoom">
|
||||
<a>{{scope.row.goodsName}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="refundGoodsOrderColumns"
|
||||
:data="refundGoodsOrderData"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="refundGoodsOrderChangeSort"
|
||||
>
|
||||
<!-- 商品栏目格式化 -->
|
||||
<template slot="goodsSlot" slot-scope="scope">
|
||||
<div style="margin-top: 5px;height: 80px; display: flex;">
|
||||
<div style="">
|
||||
<img :src="scope.row.goodsImage" style="height: 60px;margin-top: 3px">
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<div style="margin-left: 13px;margin-top: 3px;">
|
||||
<div class="div-zoom">
|
||||
<a>{{scope.row.goodsName}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单详情格式化 -->
|
||||
<template slot="orderSlot" slot-scope="scope">
|
||||
<a
|
||||
@click="$router.push({name: 'order-detail',query: {sn: scope.row.orderSn}})">{{scope.row.orderSn}}</a>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 售后单详情格式化 -->
|
||||
<template slot="refundGoodsOrderSlot" slot-scope="scope">
|
||||
<a @click="$router.push({name: 'after-order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
|
||||
</template>
|
||||
</Table>
|
||||
</Row>
|
||||
<!-- 订单详情格式化 -->
|
||||
<template slot="orderSlot" slot-scope="scope">
|
||||
<a
|
||||
@click="$router.push({name: 'order-detail',query: {sn: scope.row.orderSn}})">{{scope.row.orderSn}}</a>
|
||||
</template>
|
||||
|
||||
<!-- 售后单详情格式化 -->
|
||||
<template slot="refundGoodsOrderSlot" slot-scope="scope">
|
||||
<a @click="$router.push({name: 'after-order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<Row type="flex" justify="end" class="page" style="margin-top: 10px">
|
||||
<Page
|
||||
@@ -474,44 +470,42 @@
|
||||
</Form>
|
||||
</Row>
|
||||
<div style="min-height: 180px">
|
||||
<Row class="padding-row">
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="refundGoodsOrderColumns"
|
||||
:data="refundOrderData"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="refundOrderChangeSort"
|
||||
>
|
||||
<!-- 商品栏目格式化 -->
|
||||
<template slot="goodsSlot" slot-scope="scope">
|
||||
<div style="margin-top: 5px;height: 80px; display: flex;">
|
||||
<div style="">
|
||||
<img :src="scope.row.goodsImage" style="height: 60px;margin-top: 3px">
|
||||
</div>
|
||||
|
||||
<div style="margin-left: 13px;margin-top: 3px;">
|
||||
<div class="div-zoom">
|
||||
<a>{{scope.row.goodsName}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="refundGoodsOrderColumns"
|
||||
:data="refundOrderData"
|
||||
ref="table"
|
||||
sortable="custom"
|
||||
@on-sort-change="refundOrderChangeSort"
|
||||
>
|
||||
<!-- 商品栏目格式化 -->
|
||||
<template slot="goodsSlot" slot-scope="scope">
|
||||
<div style="margin-top: 5px;height: 80px; display: flex;">
|
||||
<div style="">
|
||||
<img :src="scope.row.goodsImage" style="height: 60px;margin-top: 3px">
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<div style="margin-left: 13px;margin-top: 3px;">
|
||||
<div class="div-zoom">
|
||||
<a>{{scope.row.goodsName}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单详情格式化 -->
|
||||
<template slot="orderSlot" slot-scope="scope">
|
||||
<a
|
||||
@click="$router.push({name: 'order-detail',query: {sn: scope.row.orderSn}})">{{scope.row.orderSn}}</a>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 售后单详情格式化 -->
|
||||
<template slot="refundGoodsOrderSlot" slot-scope="scope">
|
||||
<a @click="$router.push({name: 'after-order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
|
||||
</template>
|
||||
</Table>
|
||||
</Row>
|
||||
<!-- 订单详情格式化 -->
|
||||
<template slot="orderSlot" slot-scope="scope">
|
||||
<a
|
||||
@click="$router.push({name: 'order-detail',query: {sn: scope.row.orderSn}})">{{scope.row.orderSn}}</a>
|
||||
</template>
|
||||
|
||||
<!-- 售后单详情格式化 -->
|
||||
<template slot="refundGoodsOrderSlot" slot-scope="scope">
|
||||
<a @click="$router.push({name: 'after-order-detail',query: {sn: scope.row.sn}})">{{scope.row.sn}}</a>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<Row type="flex" justify="end" class="page" style="margin-top: 10px">
|
||||
<Page
|
||||
|
||||
@@ -1,56 +1,50 @@
|
||||
<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"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="店铺名称" prop="storeName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.storeName"
|
||||
placeholder="请输入店铺名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="店铺状态" prop="shopDisable">
|
||||
<Select v-model="searchForm.shopDisable" clearable style="width: 200px">
|
||||
<Option value="OPEN">开启中</Option>
|
||||
<Option value="CLOSED">已关闭</Option>
|
||||
<Option value="APPLY">申请中</Option>
|
||||
<Option value="APPLYING">审核中</Option>
|
||||
<Option value="REFUSED">审核拒绝</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Form-item label="创建时间" prop="createTime">
|
||||
<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>
|
||||
</Form>
|
||||
</Row>
|
||||
<Row class="operation padding-row">
|
||||
<Button @click="add" type="primary">添加</Button>
|
||||
</Row>
|
||||
<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"
|
||||
placeholder="请输入会员名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="店铺名称" prop="storeName">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.storeName"
|
||||
placeholder="请输入店铺名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="店铺状态" prop="shopDisable">
|
||||
<Select v-model="searchForm.shopDisable" clearable style="width: 200px">
|
||||
<Option value="OPEN">开启中</Option>
|
||||
<Option value="CLOSED">已关闭</Option>
|
||||
<Option value="APPLY">申请中</Option>
|
||||
<Option value="APPLYING">审核中</Option>
|
||||
<Option value="REFUSED">审核拒绝</Option>
|
||||
</Select>
|
||||
</Form-item>
|
||||
<Form-item label="创建时间" prop="createTime">
|
||||
<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>
|
||||
</Form>
|
||||
</Row>
|
||||
<Row class="operation padding-row">
|
||||
<Button @click="add" type="primary">添加</Button>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user