elementU中table表格模板(拿来即用)

elementUI拿来即用的table表格模板

<!--
 * @Description: elment table表格
 * @Version: 
 * @Autor: DYQ
 * @Date: 2021-08-07 17:38:08
 * @LastEditors: Muchen
 * @LastEditTime: 2021-08-12 14:44:03
-->
<template>
  <div class="app-container home">
    <el-card class="box-card">
      <!-- 搜索 -->
        <el-form :model="queryParams" ref="queryParams" :inline="true">
            <el-form-item label="状态" prop="status">
                  <el-select v-model="multipleStatus" multiple  clearable placeholder="请选择" size="mini" style="width:200px;">
                      <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"  :value="item.value"/>
                  </el-select>
            </el-form-item>

            <el-form-item label="发布时间">
              <el-date-picker 
                v-model="dateArray" 
                type="datetimerange" 
                range-separator="至" 
                value-format="yyyy-MM-dd HH:mm:ss" 
                start-placeholder="开始日期" 
                end-placeholder="结束日期" 
                :default-time="['00:00:00', '23:59:59']"
                @change="changeDate" style="width:300px;">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="商家名称" prop="businessId">
              <el-select
                  v-model="queryParams.businessId" filterable remote clearable reserve-keyword 
                  placeholder="搜索商家" 
                  :remote-method="remoteMethod" 
                  :loading="shopLoading">
                      <el-option v-for="item in shopOptions" :key="item.id" :label="item.shopName" :value="item.id">
                  </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="用户电话" prop="phoneNumber">
              <el-input  v-model="queryParams.phoneNumber" size="mini" placeholder="请输入用户电话" oninput ="value=value.replace(/[^\d]/g,'')" maxlength="11"/>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="submitForm('queryParams')">查询</el-button>
              <el-button type="primary" icon="el-icon-refresh" @click="resetForm('queryParams')">清空</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="shopList" size="small" border>
          <el-table-column  label="店铺名" align="center" fixed="left" prop="shopName"></el-table-column>
          <el-table-column  label="平台名称" align="center" ></el-table-column>
          <el-table-column  label="下单时间" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column  label="订单截图" align="center" >
              <template slot-scope="scope">
                  <img class="preview-image" :src="item" v-for="(item,index) in scope.row.orderPictureList"   @click="previewImage(item)" v-if="item" alt="" />
              </template>
          </el-table-column>
          <el-table-column  label="评价截图" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.commentPictureList && scope.row.commentPictureList.length>0">
                  <img class="preview-image" :src="item" v-for="(item,index) in scope.row.commentPictureList"   @click="previewImage(item)" v-if="item" alt="" />
                </div>
              </template>
          </el-table-column>
          <el-table-column  label="订单编号" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column  label="标红原因" align="center" >18</el-table-column>
          <el-table-column  label="操作" width="100" align="center" fixed="right" >
            <template slot-scope="scope">
                  <el-button type="text" plain >详情</el-button>
            </template>  
          </el-table-column>
        </el-table>


        <!-- 分页 -->
        <div class="pagination" style="margin-top:20px;text-align:center;">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total,prev, sizes, pager, next,jumper"
              :current-page.sync="pageParams.pageNum"
              :page-size="pageParams.pageSize"
              :page-sizes="[10,20,50,100]"
              :total="pageParams.total">
          </el-pagination>
        </div>
    </el-card>

    <!-- 图片预览弹窗 -->
    <el-dialog :visible.sync="preViewVisible" width="500px">
        <img width="100%" :src="preViewImageUrl" alt="">
    </el-dialog>
    
  </div>
</template>

<script>
export default {
  name: "tableRow",
  data() {
    return {
      // 搜索参数
      queryParams: {
        startTime: "",
        endTime: "",
        status: "",
        businessId: "",
        phoneNumber: ""
      },
      dateArray: [], //选择时间
      //分页参数
      pageParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      //多选
      multipleStatus: [],
      statusOptions: [
        {
          value: "status_1",
          label: "未审核"
        },
        {
          value: "status_2",
          label: "审核失败"
        },
        {
          value: "status_3",
          label: "已审核"
        }
      ],
      shopOptions: [
        {
          id: "shop_01",
          shopName: "门店001"
        },
        {
          id: "shop_02",
          shopName: "门店002"
        }
      ],
      shopLoading: false,
      shopList: [
        {
          orderPictureList: [
            "https://z3.ax1x.com/2021/08/12/fw4uHP.jpg",
            "https://z3.ax1x.com/2021/08/12/fw4uHP.jpg"
          ],
          commentPictureList: [
            "https://z3.ax1x.com/2021/08/12/fw4uHP.jpg"
          ],
          statusStr: "已审核",
          shopName: "牛炖三定理·牛油拌饭·烤鱼饭（梦时代店）",
          flag:0,
        },
      ],
      //图片预览
      preViewVisible: false,
      preViewImageUrl: "",
 
    };
  },
 
  methods: {
  
    /**分页 */
    handleSizeChange(val) {
      this.pageParams.pageNum = 1;
      this.pageParams.pageSize = val;
      this.getReviewList();
    },

    handleCurrentChange(val) {
      this.pageParams.pageNum = val;
      this.getReviewList();
    },
    
    getReviewList() {
      let params = { ...this.queryParams };
      params.status = this.multipleStatus.toString(); //数组转字符串格式
      console.log("请求。。。。。。", params);
    },

    /** 搜索按钮操作 */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.pageParams.pageNum = 1;
          this.getReviewList();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //重置表单
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
      //初始化时间
      this.dateArray = []; //发布时间
      this.multipleStatus = []; //状态多选
      this.queryParams.startTime = "";
      this.queryParams.endTime = "";
      console.log("重置后数据：", this.queryParams);
    },

    //选择日期
    changeDate(e) {
      console.log("changeDate-》", e);
      if (e) {
        this.queryParams.startTime = e[0];
        this.queryParams.endTime = e[1];
      } else {
        this.queryParams.startTime = "";
        this.queryParams.endTime = "";
      }
    },

    //搜索店名
    remoteMethod(query) {
      this.shopLoading = true;
      if (query !== "") {
        let dateTime = new Date(); //获取当前时间
        let min = dateTime.getMinutes(); // 获取分钟
        let seconds = dateTime.getSeconds(); // 获取秒数
        setTimeout(item => {
          console.log("店铺加载中。。。", min, seconds);
          this.shopOptions.push({
            id: min + seconds,
            shopName: "门店" + min + seconds
          });
          this.shopLoading = false;
        }, 2000);
      }
    },

    //图片预览
    previewImage(imgurl) {
      this.preViewVisible = true;
      this.preViewImageUrl = imgurl;
    },
  
  }
};
</script>

<style scoped lang="scss">
.preview-image {
  width: 50px;
  height: 50px;
  margin: 0 3px;
}


</style>