Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

virtual-column type="expand" 内部请求接口数据再展示时，滚动条无法正常工作 #37

Closed
maybeee19 opened this issue Oct 25, 2023 · 1 comment
Closed

virtual-column type="expand" 内部请求接口数据再展示时，滚动条无法正常工作 #37

maybeee19 opened this issue Oct 25, 2023 · 1 comment

Comments

@maybeee19
Copy link

错误描述：
点击【商品名称】该列下的内容，手动触发展开，再点击收起后，滚动条无法继续拖动。T_T

具体demo：
https://codesandbox.io/s/nifty-wright-8chhnf?file=/src/App.vue

具体代码：

<template>
  <div>
    <virtual-scroll
      ref="virtualScroll"
      :data="list"
      :item-size="62"
      key-prop="id"
      @change="onVirtualChange"
    >
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableData"
        height="600"
        row-key="id"
        style="width: 100%"
      >
        <virtual-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.children">
              <el-table-column
                align="center"
                prop="name"
                label="专业代码"
              ></el-table-column>
            </el-table>
          </template>
        </virtual-column>
        <el-table-column label="商品 ID" width="70" prop="id"></el-table-column>
        <el-table-column label="商品名称" prop="name">
          <template slot-scope="props">
            <span @click="toggleExpand(props.row)" style="cursor: pointer">
              {{ props.row.name }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </virtual-scroll>
  </div>
</template>

<script>
import VirtualScroll from "el-table-virtual-scroll";
import { VirtualColumn } from "el-table-virtual-scroll";

export default {
  components: {
    VirtualScroll,
    VirtualColumn,
  },
  data() {
    return {
      list: [],
      tableData: [],
      loading: false,
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      this.list = [];
      setTimeout(() => {
        this.list = [];
        for (let i = 1; i < 2000; i++) {
          const text = this.getRandomContent();
          const text2 = this.getRandomContent();
          this.list.push({
            id: i + 1,
            name: "商品名称，点我展开" + i,
            show: false,
            text,
            text2,
          });
        }
        this.loading = false;
      }, 1000);
    },
    getRandomContent() {
      const content = [
        "这是一条测试数据",
        "君不见黄河之水天上来，奔流到海不复回。",
        "十年生死两茫茫",
        "寻寻觅觅，冷冷清清，凄凄惨惨戚戚。",
        "桃花坞里桃花庵，桃花庵里桃花仙；桃花仙人种桃树，又摘桃花卖酒钱。",
        "明月几时有，把酒问青天。",
        "槛菊愁烟兰泣露，罗幕轻寒，",
        "寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。多情自古伤离别，更那堪冷落清秋节！今宵酒醒何处？杨柳岸，晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说？",
        "红豆生南国，春来发几枝。",
        "黄鹂",
      ];
      const i = Math.floor(Math.random() * 10);
      return content[i];
    },
    async onVirtualChange(virtualList) {
      this.tableData = virtualList;
    },
    toggleExpand(row) {
      if (!row.$v_expanded) {
        setTimeout(() => {
          let tableDataIndex = this.tableData.findIndex(
            (item) => item.id === row.id
          );
          console.log("tableDataIndex", tableDataIndex);
          this.$set(this.tableData[tableDataIndex], "children", [
            { id: Math.random() + row.id + 2111, name: "商品名称" },
            { id: Math.random() + row.id + 2112, name: "商品名称" },
            { id: Math.random() + row.id + 2113, name: "商品名称" },
            { id: Math.random() + row.id + 2114, name: "商品名称" },
            { id: Math.random() + row.id + 2115, name: "商品名称" },
            { id: Math.random() + row.id + 2116, name: "商品名称" },
            { id: Math.random() + row.id + 2117, name: "商品名称" },
            { id: Math.random() + row.id + 2118, name: "商品名称" },
            { id: Math.random() + row.id + 2119, name: "商品名称" },
            { id: Math.random() + row.id + 2120, name: "商品名称" },
            { id: Math.random() + row.id + 2121, name: "商品名称" },
            { id: Math.random() + row.id + 2122, name: "商品名称" },
            { id: Math.random() + row.id + 2123, name: "商品名称" },
          ]);
          this.$refs.virtualScroll.toggleRowExpansion(row);
          this.$refs.virtualScroll.update();
        }, 1500);
      } else {
        this.$refs.virtualScroll.toggleRowExpansion(row);
        this.$refs.virtualScroll.update();
      }
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style lang='less' scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
@xiaocheng555
Copy link
Owner

错误描述： 点击【商品名称】该列下的内容，手动触发展开，再点击收起后，滚动条无法继续拖动。T_T

具体demo： https://codesandbox.io/s/nifty-wright-8chhnf?file=/src/App.vue

具体代码：

<template>
  <div>
    <virtual-scroll
      ref="virtualScroll"
      :data="list"
      :item-size="62"
      key-prop="id"
      @change="onVirtualChange"
    >
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableData"
        height="600"
        row-key="id"
        style="width: 100%"
      >
        <virtual-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.children">
              <el-table-column
                align="center"
                prop="name"
                label="专业代码"
              ></el-table-column>
            </el-table>
          </template>
        </virtual-column>
        <el-table-column label="商品 ID" width="70" prop="id"></el-table-column>
        <el-table-column label="商品名称" prop="name">
          <template slot-scope="props">
            <span @click="toggleExpand(props.row)" style="cursor: pointer">
              {{ props.row.name }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </virtual-scroll>
  </div>
</template>

<script>
import VirtualScroll from "el-table-virtual-scroll";
import { VirtualColumn } from "el-table-virtual-scroll";

export default {
  components: {
    VirtualScroll,
    VirtualColumn,
  },
  data() {
    return {
      list: [],
      tableData: [],
      loading: false,
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      this.list = [];
      setTimeout(() => {
        this.list = [];
        for (let i = 1; i < 2000; i++) {
          const text = this.getRandomContent();
          const text2 = this.getRandomContent();
          this.list.push({
            id: i + 1,
            name: "商品名称，点我展开" + i,
            show: false,
            text,
            text2,
          });
        }
        this.loading = false;
      }, 1000);
    },
    getRandomContent() {
      const content = [
        "这是一条测试数据",
        "君不见黄河之水天上来，奔流到海不复回。",
        "十年生死两茫茫",
        "寻寻觅觅，冷冷清清，凄凄惨惨戚戚。",
        "桃花坞里桃花庵，桃花庵里桃花仙；桃花仙人种桃树，又摘桃花卖酒钱。",
        "明月几时有，把酒问青天。",
        "槛菊愁烟兰泣露，罗幕轻寒，",
        "寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。多情自古伤离别，更那堪冷落清秋节！今宵酒醒何处？杨柳岸，晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说？",
        "红豆生南国，春来发几枝。",
        "黄鹂",
      ];
      const i = Math.floor(Math.random() * 10);
      return content[i];
    },
    async onVirtualChange(virtualList) {
      this.tableData = virtualList;
    },
    toggleExpand(row) {
      if (!row.$v_expanded) {
        setTimeout(() => {
          let tableDataIndex = this.tableData.findIndex(
            (item) => item.id === row.id
          );
          console.log("tableDataIndex", tableDataIndex);
          this.$set(this.tableData[tableDataIndex], "children", [
            { id: Math.random() + row.id + 2111, name: "商品名称" },
            { id: Math.random() + row.id + 2112, name: "商品名称" },
            { id: Math.random() + row.id + 2113, name: "商品名称" },
            { id: Math.random() + row.id + 2114, name: "商品名称" },
            { id: Math.random() + row.id + 2115, name: "商品名称" },
            { id: Math.random() + row.id + 2116, name: "商品名称" },
            { id: Math.random() + row.id + 2117, name: "商品名称" },
            { id: Math.random() + row.id + 2118, name: "商品名称" },
            { id: Math.random() + row.id + 2119, name: "商品名称" },
            { id: Math.random() + row.id + 2120, name: "商品名称" },
            { id: Math.random() + row.id + 2121, name: "商品名称" },
            { id: Math.random() + row.id + 2122, name: "商品名称" },
            { id: Math.random() + row.id + 2123, name: "商品名称" },
          ]);
          this.$refs.virtualScroll.toggleRowExpansion(row);
          this.$refs.virtualScroll.update();
        }, 1500);
      } else {
        this.$refs.virtualScroll.toggleRowExpansion(row);
        this.$refs.virtualScroll.update();
      }
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style lang='less' scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

不要使用children属性，el-table会当成树结构，children改为其他名称试试

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@xiaocheng555 @maybeee19