Comments (6)
组件是怎么样的
from el-table-virtual-scroll.
from el-table-virtual-scroll.
方便写个demo吗
from el-table-virtual-scroll.
// 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>
from el-table-virtual-scroll.
好的,我再研究研究
from el-table-virtual-scroll.
好的,我再研究研究
ok,有问题再@我
from el-table-virtual-scroll.
Related Issues (20)
- Duplicate keys detected: 'el-table_1_column_1'. This may cause an update error. HOT 11
- 帮忙回答下: 初始化数据的方法一定要在created里面调用吗? 我现在想做导入后虚拟滚动渲染 显示数据都是重复的 HOT 17
- 自定义固定列 所有列宽总宽度小于表格宽度时 固定列样式有问题 HOT 2
- 更新到1.1.3后报错 el-table-column未注册 HOT 14
- 表格隐藏状态下更新绑定数组长度,显示后滚动条位置异常 HOT 9
- 使用二次封装的el-table时,cellFixedStyle() 方法里获取table时没有使用 getElTable() 方法获取 HOT 2
- row-span-key对应的函数只能返回一个key吗 ,多列参与了合并行怎么处理? HOT 2
- 表格列数过多仍然会卡顿,这个会考虑解决吗? HOT 4
- 使用toggleRowSelection选中多行会卡死,有什么办法高效选中多行么 HOT 4
- 新增 Backtop 回到顶部 功能 HOT 1
- 是否考虑将element-table的select事件集成进来 HOT 3
- 是否考虑将element-table的select事件集成进来
- scrollTo事件不精确的问题 HOT 3
- 希望支持横向滚动条sticky HOT 4
- 关于在resize后vfixed类名错误问题 HOT 1
- 虚拟表格如果动态添加数据的时候就会出现空白,主要是产生的偏移值不对 HOT 2
- el-table-column 添加 show-overflow-tooltip 之后,在当前show-overflow-tooltip列滚动时,页面会抖动 HOT 1
- this.elTable.syncPosition is not a function HOT 3
- 大神考虑支持下vue3不? HOT 1
- 复制案例换了数据 虚拟滚动就不生效了
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from el-table-virtual-scroll.