首页 > 其他分享 >弹框 勾选 列表 分页

弹框 勾选 列表 分页

时间:2024-12-19 10:55:01浏览次数:9  
标签:box padding color 列表 filter 勾选 background 弹框 border

<template>
  <!-- 搜索筛选 -->
  <van-popup
    v-model="showPopup"
    round
    position="bottom"
    :style="{ height: '70%' }"
    closeable
    close-icon="cross"
    class="page-filter"
    @close="closeFn"
  >
    <div class="filter-header tc f16 pt20">选择</div>
    <div class="filter-content flexd" style="background-color: #f4f4f6">
      <!-- 列表内容 -->
      <div class="h" style="overflow-y: hidden; position: relative">
        <scroller
          :on-infinite="infinite"
          :noDataText="noDataText"
          class="h"
          ref="myscroller"
        >
          <!-- style="overflow-y: auto" -->

          <div v-for="(item, i) of tableData" :key="i">
            <div class="list bdr10 page-checkbox-w">
              <van-checkbox v-model="item.checked">
                <div class="pt5">{{ item.bizTitle }}</div>

                <div class="list-item flexa f14 cor6">
                  <div class="list-item-lf flex-shrink">编号</div>
                  <span class="text_overflowd">
                    {{ item.bizNo }}
                  </span>
                </div>
                <div class="list-item flexa f14 cor6">
                  <div class="list-item-lf flex-shrink">申请时间</div>
                  <span class="text_overflowd">
                    {{ item.submitTime }}
                  </span>
                </div>

                <!-- 属性标签 -->
                <div class="list-statu custom-label">
                  {{ item.bizStateName }}
                </div>
                <div class="item-line bgcm"></div
              ></van-checkbox>
            </div>
          </div>
        </scroller>
      </div>
    </div>

    <div class="filter-btm-btn pr10 pl10 f14 mt50">
      <van-button class="w" type="info" @click="confirmFn">确定</van-button>
    </div>
  </van-popup>
</template>

<script>
import { queryOptionalWorkTicketList } from "@/api/constructOneTwo/constructStep.js";
export default {
  name: "linkTickets",
  props: ["showPopup", "planId"],
  components: {},
  data() {
    return {
      // showPopup: false,

      page: {
        index: 1,
        size: 10,
      },
      noDataText: "", //没有更多数据 文案
      tableData: [],
    };
  },
  watch: {
    // showPopup(val, newVal) {
    //   this.showPopupEnd = val;
    // },
  },
  created() {
    this.getData();
  },
  methods: {
    // TEMPLATE CODE APP LIST 1 初始化调取方法
    infinite(done) {
      console.log("zhellizhjiofzjfoj");
      setTimeout(() => {
        this.page.index++;
        this.getData();
      }, 300);
    },
    // TEMPLATE CODE APP LIST 2 获取列表数据请求
    async getData() {
      let datVal = {
        // ...this.formSesrch,
        // bizTypeGroup: "WORK_TICKET",
        pageNum: this.page.index,
        pageSize: this.page.size,
        planId: this.planId,
        // startCreateTime: this.startCreateTime,
        // endCreateTime: this.endCreateTime,
      };
      const result = await queryOptionalWorkTicketList(datVal);
      if (this.$refs.myscroller) {
        this.$refs.myscroller.finishInfinite(true);
      }
      if (result.data.length < 10) {
        // this.noDataText = this.sysNoDataTextEnd;
      }
      if (result.data && result.data.length > 0) {
        this.tableData = this.tableData.concat(result.data);

        if (result.pageNum) {
          this.page.index = result.pageNum;
        }
      }
    },
    closeFn() {
      // this.showPopupEnd = false;
      this.$emit("update:showPopup", false);
    },
    // 完成
    confirmFn() {
      let arr = [];
      for (let index = 0; index < this.tableData.length; index++) {
        if (this.tableData[index].checked) {
          arr.push(this.tableData[index]);
        }
      }
      this.$emit("confirm", arr);
      this.closeFn();
    },
  },
};
</script>
<style lang="scss" scoped>
.custom-label {
  color: #fff !important;
  background-color: #0089ff;
}
</style>
.page-filter .filter-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #fff;
    padding-bottom: 15px;
}

.page-filter .filter-content {
    height: 100%;
    box-sizing: border-box;
    padding-top: 65px;
    padding-left: 10px;
    padding-right: 10px;
    overflow-y: auto;
    padding-bottom: 80px;
    border-top: 2px solid #fff;
}

.page-filter .filter-tag {
    display: inline-block;
    box-sizing: border-box;
    margin-right: 15px;
    margin-top: 10px;
    padding: 5px 0;
    background-color: #f0f0f0;
    border-radius: 16px;
    font-size: 13px;
    width: 80px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid transparent;
    margin-left: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 30%;
}

.page-filter .filter-tag-active {
    box-sizing: border-box;
    background-color: #cae2fd;
    border: 1px solid #2e7cf9 !important;
    color: #3989f9;
}
.page-filter {
    .filter-header {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background-color: #fff;
        padding-bottom: 15px;
    }

    .filter-content {
        height: 100%;
        box-sizing: border-box;
        padding-top: 65px;
        padding-left: 10px;
        padding-right: 10px;
        overflow-y: auto;
        padding-bottom: 80px;
        border-top: 2px solid #fff;
    }

    .filter-content.no-btm-btn {
        padding-bottom: 20px !important;
    }

    .filter-tag {
        display: inline-block;
        box-sizing: border-box;
        margin-right: 15px;
        margin-top: 10px;
        padding: 5px 0;
        background-color: #f0f0f0;
        border-radius: 16px;
        font-size: 13px;
        width: 80px;
        box-sizing: border-box;
        text-align: center;
        border: 1px solid transparent;
        margin-left: 0 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 30%;
    }

    .filter-tag-active {
        box-sizing: border-box;
        background-color: #cae2fd;
        border: 1px solid #2e7cf9 !important;
        color: #3989f9;
    }

    .filter-btm-btn {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #fff;
        box-sizing: border-box;
        padding-top: 10px;
        padding-bottom: 10px;

        .btn {
            display: inline-block;
            width: 45%;
            height: 40px;
            line-height: 40px;
            background-color: #8a8a8a;
            color: #fff;
            text-align: center;
        }

        .btn_lf {
            border-radius: 20px 0 0 20px;
        }

        .btn_rt {
            border-radius: 0 20px 20px 0;
            background-color: #2e7cf9;
        }
    }
}

 

标签:box,padding,color,列表,filter,勾选,background,弹框,border
From: https://www.cnblogs.com/dianzan/p/18616655

相关文章

  • 弹框 列表选择没有分页
    <van-popupv-model="showProject"position="bottom"get-container="body"class="pb20":style="{height:'80%',}"closeableround......
  • 按类别整理各行业所需证书列表
    金融行业特许金融分析师(CFA):国际金融领域认可度最高的资格证书之一,是金融分析领域的专家,从事投资分析、证券分析、企业咨询等方面工作。注册会计师(CPA):中国最高级别的会计专业人士,具备较高的财务分析和财务管理能力,可在企业、政府等机构中从事高级财务管理和咨询工作。金融风险......
  • 【知识】分块 & 块状列表
    分块将一个长度为\(n\)的序列分成\(\sqrtn\)段,那么每段长度不超过\(\sqrtn\),每一个区间操作可以转化成小于\(\sqrtn\)个完整段\(+\)\(2\)个长度小于\(\sqrtn\)的段。时间复杂度:\(\mathcal{O}(n^2)\to\mathcal{O}(n\times\sqrtn)\)模板:#include<iostrea......
  • 登入器列表内容
    [61TECH_HEIBAILIUYI]#gaIcRdcd5dAdFcyc7dfaRaAcZcmdWdldMdkc5cgarcgctdVdPcgdfdncdb8cldadBd3dmc2docEb7c4c8czcEcRdfeudrbzbtbCbxbtbUbUbTbWbIa0aXaKa1a0aNaJa5a1aVb5bWbTbNbJbKaGa2a0aWbVb5b8bJbcc0aHaWaOa1b7bFbldCcZcgeSd4dUdndedqcpdtcybaafbeeheYcDcddsdWcFcPb4dBcyc7d......
  • 使用Python脚本之家商品列表实现的解析
    本文将详细介绍如何使用Python脚本之家商品列表来实现各种功能。通过对不同方面的阐述,帮助读者更好地理解和应用这个功能。一、创建商品列表1、首先,我们需要导入所需的库,如下所示:代码语言:javascript复制importrequestsfrombs4importBeautifulSoup2、接下来,我们可以使用......
  • Python中的列表,元组
    列表列表的特点:有序,可重复,长度可变(增删改查),异构,可切片,可遍历。列表的基本语法:列表名=[元素]list=['apple','banana','pineapple']列表的作⽤是⼀次性存储多个数据,并且列表可以存储不同类型的数据一:列表的增删改查:增加:append():增加指定数据到列表中names=['1',......
  • 《鸿蒙开发-答案之书》自定义弹框
    《鸿蒙开发-答案之书》自定义弹框系统的弹框不适用的,很难用。下面我们来自定义弹框试试步骤一:用@CustomDialog注解,标识你是自定义弹框,然后在build里面写你弹框布局示例代码如下:@CustomDialogexportstructChatGoldStandardDialog{goldSum:numbercontroller:C......
  • 在PbootCMS中如何隐藏没有缩略图的文章列表项?
    在PbootCMS中,如果你希望在文章列表中完全隐藏没有缩略图的文章列表项,可以通过PbootCMS提供的条件判断标签 pboot:if 来实现。以下是如何使用 pboot:if 标签来判断文章是否有缩略图,并在没有缩略图时隐藏整个列表项的详细步骤和示例代码:理解 isico 属性:在PbootCMS中,每篇文......
  • 零基础微信小程序开发——WXML 模板语法之列表渲染-WXML和样式设置(保姆级教程+超详细)
    ......
  • 如何在PbootCMS中使用搜索结果列表标签来显示文章的详细信息?
    在PbootCMS中,搜索结果列表标签提供了丰富的选项,可以用来显示文章的详细信息。这些标签可以帮助你构建一个详细且用户友好的搜索结果页面。以下是一些常用的搜索结果列表标签及其用法:[search:title]:显示文章的标题。[search:author]:显示文章的作者。[search:source]:显示文章的......