首页 > 其他分享 > 添加循环项,滑动条到最下方

添加循环项,滑动条到最下方

时间:2023-08-16 12:11:20浏览次数:26  
标签:index parent filterScrollTo 条到 fieldIndex 添加 child 滑动

filterScrollTo() {
      const parent = document.querySelector('#quoteitemcon');
      const child = document.getElementsByClassName('quote-con');
      console.log('parent', parent, child);
      parent.scrollTo({
        top: child[child.length - 1].offsetTop,
        behavior: 'smooth'
      });
    },

 // 删除条件
    deleteQuote(index, fieldIndex) {
      this.tableColumns[index].fieldInfo.quoteRelationship.splice(
        fieldIndex,
        1
      );
      console.log(
        'index',
        index,
        fieldIndex,
        this.tableColumns[index].fieldInfo.quoteRelationship
      );
      // this.filterData.splice(index, 1);
      this.$nextTick(() => {
        this.filterScrollTo();
      });
    },
// 添加同理,也需要调
 this.$nextTick(() => {
        this.filterScrollTo();
      });

切记:同一个页面多个地方使用或者多个页面使用filterScrollTo,记得把父子组件的id名称换掉

<el-col :span="24" class="quote-item-con" id="quoteitemcon">
                    <label
                      style="margin-bottom: 10px; display: block"
                      v-show="fieldOption.length > 0"
                      >引用条件</label
                    >
                    <div
                      v-for="(quoteItem, fieldIndex) in column.fieldInfo
                        .quoteRelationship"
                      :key="fieldIndex"
                      class="quote-con"
                    >
                      <i
                        class="el-icon-close"
                        @click="deleteQuote(index, fieldIndex)"
                      ></i>
                      <el-form-item
                        label=""
                        prop="relationshipFiledName"
                        style="padding: 0 5px; margin-bottom: 0"
                        class="rule-small-item"
                      >
                        <el-select v-model="quoteItem.relationshipFiledName">
                          <el-option
                            v-for="item in fieldOption"
                            :key="item.id"
                            :label="item.fieldRemarks"
                            :value="item.fieldName"
                          ></el-option>
                        </el-select>
                      </el-form-item>
</div>
</el-col>

标签:index,parent,filterScrollTo,条到,fieldIndex,添加,child,滑动
From: https://www.cnblogs.com/sinceForever/p/17633677.html

相关文章

  • 代码随想录算法训练营第十三天|单调数列:滑动窗口最大值(力扣239.)、优先级队列:前k个高
    单调数列:滑动窗口最大值(力扣239.)给定滑动窗口的范围,求每个滑动窗口范围内的最大值使用单调队列实现对于最大值数字前面的数字不存入数列,对于最大值数字后面的数字存入数列中单调队列中数字的大小呈递减顺序pop(value):如果窗口移除的元素等于单调队列的队口元素,则pop;否则什......
  • Ansible 批量100台服务器添加 Crontab
    Ansible 是使用Python开发的自动化运维工具。它可以配置管理,部署软件并编排更高级的任务,例如持续部署或零停机滚动升级。Ansible可以用来管理crontab。Crontab 是一个用于在Unix和Unix-like操作系统上执行定期任务的工具,它允许用户在预定的时间间隔内自动运行命令或脚本......
  • 添加NFS(Centos7)
    在Rancher中,我们需要映射磁盘值docker中,因此我们需要将磁盘路径挂载到docker内,但由于有多个服务器,我们需要指定存储某一台服务器内,这时候我们需要共享文件夹,来访问响应文件。因此我们这边引入了NFS1.环境准备1.1准备2台服务器A:172.16.169.220作为服务器......
  • 通过 Listener 解决 Slider 滑动冲突
    问题背景 在Flutter中,我们经常使用ScrollView+Slider这样的场景。但是在这样的场景下,存在用户体验并不好的问题:列表滑动的过程中Slider不能响应举例:1\.滑动未完成,Slider不能响应SingleChildScrollView在我们手指抬起的过程中,还是会有一定的惯性,列表不会立刻停止。它这......
  • iTOP-i.MX8M开发板添加USB网络设备驱动
    选中支持USB网络设备驱动,如下图所示:[*]DeviceDrivers→*-Networkdevicesupport→USBNetworkAdapters→{*}Multi-purposeUSBNetworkingFramework将光标移动到save保存,如下图所示:保存到arch/arm64/configs/android_defconfig文件,然后点击OK,Exit,如下图所示:更多内......
  • mysql添加索引的方法(Navicat可视化加索引和sql语句加索引)
    mysql添加索引的方法(Navicat可视化加索引和sql语句加索引) 使用索引的场景:阿里云日志里出现了慢sql 然后发现publish_works_id字段会经常用于一些关联,所以决定把这个字段加上索引,优化sql可视化navicat操作字段加索引,选择字段所在的表,第一步:右键->设计表第二步......
  • mybatis insert foreach批量添加
    mybatisinsertforeach批量添加intinsertSelectiveBatch(List<ImageDetailEntity>myList);//写法1<insertid="insertSelectiveBatch"><foreachitem="record"collection="list"separator=",">......
  • django添加装饰器进行登录角色验证
    目的:在用户请求各种接口时验证role字段是否不为user1.创建装饰器  decorators.pyfromdjango.httpimportJsonResponsefromfunctoolsimportwrapsfromutils.tokenimportget_useridfromyshop.modelsimportMyUserdefcheck_role(view_func):@wraps(view_......
  • git 添加目录失败问题排查
      拷贝了一个已有项目到新项目目录后,发现有一个子目录无法添加到git管理中。这个子目录的特点是,曾经包含.git目录,然后被我手动删除。但是这个目录再也无法添加到git管理中,而且用gitstatus也无法显示其状态。查看已被排除的文件及目录gitstatus--ignored并没......
  • WinForm DevExpress 添加行内按钮
    1.在设计器里面添加一列,设置单元格不可编辑、只读属性   2.在所在GridView属性里面添加CustomDrawCell事件与RowCellClick事件privatevoidgvMain_CustomDrawCell(objectsender,DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgse){......