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.

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

多级表头+复选框+序号列同时使用,加载表格时会丢失复选框和序号 #55

Closed
Yyc1537 opened this issue Dec 21, 2023 · 6 comments

Comments

@Yyc1537
Copy link

Yyc1537 commented Dec 21, 2023

20231221-181245.mp4

不知道是不是嵌套生成的原因
这样没问题
image
这样就有问题
image
有没有正确的使用示例

@xiaocheng555
Copy link
Owner

20231221-181245.mp4
不知道是不是嵌套生成的原因 这样没问题 image 这样就有问题 image 有没有正确的使用示例

组件是怎么样的

@Yyc1537
Copy link
Author

Yyc1537 commented Dec 21, 2023

image
代码太多,大概就是这样,嵌套使用组件,多表头又再生成一次

@xiaocheng555
Copy link
Owner

方便写个demo吗

@xiaocheng555
Copy link
Owner

image 代码太多,大概就是这样,嵌套使用组件,多表头又再生成一次

没有复现出来
image

// complex1.vue
<template>
  <div>
    <virtual-scroll
      ref="virtualScroll"
      :data="list"
      :item-size="62"
      key-prop="id"
      @change="(virtualList) => tableData = virtualList">
      <el-table
        :data="tableData"
        height="800"
        row-key="id"
        style="width: 100%">
        <virtual-column fixed width="60" type="selection"></virtual-column>
        <virtual-column fixed label="索引" width="80" type="index"></virtual-column>
        <virtual-column type="expand" >
          <template slot-scope="scope">
            {{ scope.row.text }}
          </template>
        </virtual-column>
        <el-table-column
          prop="date"
          label="日期"
          width="150">
        </el-table-column>
        <template v-for="(column, index) in columns">
          <ComplexColum
            :column="column"
            :key="index">
          </ComplexColum>
        </template>
      </el-table>
    </virtual-scroll>
  </div>
</template>

<script>
import VirtualScroll, { VirtualColumn } from 'el-table-virtual-scroll'
import { mockData } from '@/utils'
import ComplexColum from './complexColum1'

export default {
  components: {
    VirtualScroll,
    VirtualColumn,
    ComplexColum
  },
  data () {
    return {
      list: mockData(0, 2000),
      tableData: [],
      columns: [
        {
          title: '内容',
          prop: 'text',
          width: 400
        },
        {
          title: '合并列',
          columns: [
            {
              width: 200,
              title: '地址',
              prop: 'address'
            },
            {
              width: 200,
              title: '名称',
              prop: 'name'
            },
            {
              width: 100,
              title: 'id',
              prop: 'id'
            }
          ]
        },
        {
          title: '内容2',
          prop: 'text2',
          width: 400,
        },
        {
          title: '名称',
          prop: 'name'
        }
      ]
    }
  },
  methods: {

  },
  created () {
  }
}
</script>

<style lang='less' scoped>

</style>
// complexColum1.vue
<template>
  <el-table-column :width="column.width">
    <template slot="header">
      {{ column.title }}
    </template>
    <template slot-scope="{row}">
      {{ row[column.prop] }}
    </template>
    <template v-for="(child, index) in column.columns">
      <component
        :is="'Child'"
        :key="index"
        :column="child">
      </component>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: 'complex-colunm',
  props: {
    column: {
      type: Object
    }
  },
  beforeCreate () {
    this.$options.components.Child = require('./complexColum1').default
  }
}
</script>

<style lang='less' scoped>
</style>

@Yyc1537
Copy link
Author

Yyc1537 commented Dec 21, 2023

好的,我再研究研究

@Yyc1537 Yyc1537 closed this as completed Dec 21, 2023
@xiaocheng555
Copy link
Owner

好的,我再研究研究

ok,有问题再@我

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants