elementui中表格嵌套了input框,数据量很大的情况下,输入框输入会卡顿
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
elementui中的表格嵌套了太多的input框就会卡顿,导致性能下降;
所以首次渲染可以全部渲染span,当点击某个span的时候再变成input框,这样可以提高一些性能;
设置两个事件:
row-class-name
: 点击行的时候触发,可以拿到row和rowIndex,可以把当前行的索引设置给行的对象数据中;
@cell-click
: 点击某个单元格时触发;
先定义两个变量:
clickCellIndex
: 记录被点击的是哪一行
clickCellLabel
: 记录被点击的是哪一列
然后input框中判断:scope.row.index === clickCellIndex && scope.column.label == clickCellLabel
来决定是否渲染;
完整代码:
<template>
<div>
<el-button type="primary" @click="add">增行2000</el-button>
<el-table
:data="tableData"
style="width: 100%"
height="500"
border
@cell-click="handleRowClick"
:row-class-name="tableRowClassName"
>
<el-table-column prop="date" label="日期">
<template slot-scope="scope">
<el-input
v-if="
scope.row.index === clickCellIndex &&
scope.column.label == clickCellLabel
"
v-model="scope.row.date"
placeholder="请输入内容"
@blur="inputBlur(scope.row)"
></el-input>
<span v-else>111</span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<el-input
v-if="
scope.row.index === clickCellIndex &&
scope.column.label == clickCellLabel
"
v-model="scope.row.name"
placeholder="请输入内容"
@blur="inputBlur(scope.row)"
></el-input>
<span v-else>111</span>
</template>
</el-table-column>
<el-table-column prop="address" label="地址">
<template slot-scope="scope">
<el-input
v-if="
scope.row.index === clickCellIndex &&
scope.column.label == clickCellLabel
"
v-model="scope.row.address"
placeholder="请输入内容"
@blur="inputBlur(scope.row)"
></el-input>
<span v-else>111</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
clickCellIndex: null,
clickCellLabel: ""
}
},
methods: {
add() {
for (let i = 0; i < 3000; i++) {
let obj = {
date: '',
name: '',
address: ''
}
this.tableData.push(obj)
}
},
tableRowClassName({ row, rowIndex, columnIndex, column }) {
// 把每一行的索引放进row
row.index = rowIndex;
},
handleRowClick(row, column) {
this.clickCellIndex = row.index;
this.clickCellLabel = column.label;
},
inputBlur(row) {
this.clickCellIndex = null;
this.clickCellLabel = "";
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
margin-bottom: 0px;
}
</style>
效果如下:
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)