xiaocheng555 / el-table-virtual-scroll Goto Github PK

<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>

ERROR in static/js/0.752c5439a0eef37cc905.js from UglifyJs
Unexpected token: name (hook) [./~/el-table-virtual-scroll/dist/el-table-virtual-scroll.esm.js:1422,0][static/js/0.752c5439a0eef37cc905.js:6900,8]