uniapp实现微信小程序pc端需求：双击表格行跳转详情，编辑完返回，表格滚动定位到之前选择的表格行

需求：实现双击表格行跳转详情编辑页面，编辑完返回时定位到之前选择的表格行

1.修改了uniapp官方组件库uni-table中的uni-tr的源码，添加@click事件，添加<slot name="scroll"></slot>插槽

 <block>
    <slot name="scroll"></slot>
    <view
      class="uni-table-tr"
      @click="rowClick"
      :class="{ 'is-active': isActive }">
      <view
        v-if="selection === 'selection'"
        class="checkbox"
        :class="{ 'tr-table--border': border, 'checkbox-head': isHeadTr }">
        <table-checkbox
          :checked="checked"
          :indeterminate="indeterminate"
          :disabled="disabled"
          @checkboxSelected="checkboxSelected"></table-checkbox>
      </view>
      <slot></slot>
    </view>
  </block>

添加<slot name="scroll"></slot>插槽的目的是搭配scroll-view标签与其scroll-into-view属性，用于渲染滚动定位元素，实现滚动定位
<template/> 和 <block/>并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
但实际使用中发现<template/> 做包装元素会提示编译错误，使用 <block/>则很正常

模拟双击效果

 rowClick(e) {
   
      let currentTime = e.timeStamp;
      if (currentTime - this.lastTapTime < 300) {
   
        // 执行双击操作
        this.$emit("rowClick", "");
      } 
      // 更新点击时间
      this.lastTapTime = currentTime;
    },

2.页面中使用uni-table，使用scroll-view滚动，使用其scroll-into-view属性实现滚动定位

 <template>
  <scroll-view scroll-y="true" class="scroll" :scroll-into-view="scrollid">
    <view class="table-content">
      <uni-table
        ref="table2"
        stripe
        emptyText="暂无更多数据"
        class="table-content"
        type="selection"
        @selection-change="selectionChange2"
      >
        <uni-tr isHeadTr="true">
          <uni-th align="center" width="80">序号</uni-th>
          <uni-th align="center" width="150">计划开始时间</uni-th>
          <uni-th align="center" width="150">计划结束时间</uni-th>
        </uni-tr>
        <uni-tr
          v-for="(item, index) in listDataSucess"
          :key="item.id"
          @rowClick="rowClick(item)"
          :is-active="item.id === scrollintoid"
        >
          <template #scroll>
            <text id="scrollId" v-if="item.id === scrollintoid"></text>
          </template>
          <uni-td align="center">
            <view>{
  { index + 1 }}</view>
          </uni-td>
          <uni-td align="center">{
  { item.kssj ? item.kssj : "" }}</uni-td>
          <uni-td align="center">{
  { item.jssj ? item.jssj : "" }}</uni-td>
        </uni-tr>
      </uni-table>
    </view>
  </scroll-view>
</template>

scroll-into-view需要提供滚动到的元素的id，scroll-into-view可以动态绑定id（:scroll-into-view="scrollid"），但是滚动到元素的id不能动态绑定，所以只能通过v-if渲染这个元素

通过v-if渲染这个元素能触发滚动

<template #scroll>
   <text id="scrollId" v-if="item.id === scrollintoid"></text>
</template>

这个元素动态绑定id不能触发滚动

 <template #scroll>
    <text :id="item.id === scrollintoid?'scrollId':''" ></text>
 </template>

js部分

scrollintoid变量·是用于v-if判断是否渲染滚动定位元素，scrollid则是滚动定位元素的固定id，这两个变量最开始置空，这样能保障触发滚动效果

initData() {
   
      this.scrollintoid = "";
      this.scrollid = "";
      util.request(api.ListInfo, this.params, "GET").then((res) => {
   
        if (res.code === 0) {
   
          this.ListInfo = res.data;
          this.$nextTick(() => {
   
            setTimeout(() => {
   
              this.scrollid = "scrollId";
              this.scrollintoid = this.$store.state.scrollId;
            }, 50);
          });
        } else {
   
          util.showErrorToast(res.msg);
        }
      });
    },

行点击事件，保存点击行的id，返回页面时请求接口能触发滚动

rowClick(item) {
   
      this.$store.commit("setScrollId", item.id);
      uni.navigateTo({
   
        url:
          "/package-pc/pages/choose/choose?id=" +
          item.id,
      });
    },

vuex部分

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
   
  state: {
   
    scrollId: "",
  },
  mutations: {
   
    setScrollId(state, id) {
   
      state.scrollId = id;
    },
  },
});
export default store;

后续有时间给uni-ui提提pr吧，或者自己在插件市场发布下