Comments (5)
试试原生input+修饰符。
from element.
使用原生的也有这个问题的,使用.lazy 显示是正常的了,但触发change 的时候这个问题又出现了
第一次输入12
显示值为 undefined
再次输入 456
显示内容 12
,再次输入123
显示的是456
应该是这个lazy 引起的,这种该怎么解决
<template slot="header">
<input v-model.lazy="filter_condition.name" @change="handleChangeName">
</template>
from element.
想到了一种方法,使用路由后面携带参数 tab
参数 表示需要渲染的指定列,测试了一下,没有出现延迟现象
格式:
http://localhost:3000/table
默认需要显示的列
http://localhost:3000/table?tab=name
需要展示name
列
from element.
使用原生的也有这个问题的,使用.lazy 显示是正常的了,但触发change 的时候这个问题又出现了 第一次输入
12
显示值为undefined
再次输入456
显示内容12
,再次输入123
显示的是456
应该是这个lazy 引起的,这种该怎么解决<template slot="header"> <input v-model.lazy="filter_condition.name" @change="handleChangeName"> </template>
<template>
<el-table
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%">
<el-table-column
label="Date"
prop="date">
</el-table-column>
<el-table-column
label="Name"
prop="name">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<input v-model.lazy="search" @input="handleChangeName">
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
search: ''
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
handleChangeName(val) {
console.log(val.target.value)
}
}
}
</script>
这么试试呢。
from element.
试过了,这个table的列初始化是显示出来的,所以输入或者其他都是正常的,实际是table中search的input所在列通过v-if先隐藏,当通过button再次显示这一列时,就出现了这种情况,怀疑是因为组件渲染的问题,可以通过通过请求路由参数的方式指定控制初始化的列项,就可以避免这个问题出现
from element.
Related Issues (20)
- [Feature Request] how to add id to every DOM HOT 1
- [Bug Report] DateTimePicker范围选择器,选中第一个时间以后不选中第二个时间直接点击清空按钮,下一次打开选择会出问题。 HOT 1
- el-table @row-contextmenu event is not working on iPhone mobile.
- [Bug Report] DateTimePicker日期选择器设置firstDayOfWeek:3,导致部分月份日期选择后会顺延7天 HOT 3
- [Feature Request] el-slider 自定义设置标记的固定位置(占整个滑动条长度的百分比),而不是自动计算标记的数据占比的位置 HOT 1
- [Bug Report] Theme editor not working HOT 2
- [Bug Report] el-table 同时使用type和sortable时,显示异常
- [Bug Report] tree组件中事件check-change中的第三个参数值异常
- [Bug Report] After clicking to view the official theme, there is a pop-up error message stating that the service is not available (503)
- [Bug Report] Table组件里的bodyHeight计算逻辑有误 HOT 2
- [Bug Report] 最新版本elemen-ui在webpack里运行table显示空白,在vite里正常 HOT 6
- [Feature Request] 希望el-select在多选的情况下,提供修改选中值el-tag的样式 HOT 5
- [Bug Report] table组件使用toggleRowSelection 出现的bug
- [Bug Report] Textarea autosize does not work in Firefox HOT 1
- [Bug Report] 网页缩放后,el-table show-overflow-tooltip ,原本无tooltip的短内容也展示了tooltip,且没有附加缩略符号
- [Bug Report] win11下,el-upload多选不能鼠标一次框选多个 HOT 2
- [Bug Report] date-picker组件显示异常
- [Feature Request] 能否给date-picker的cell增加一个slot
- [Bug Report] el-time-picker is-range selectableRange设置时间范围options失效
- [Bug Report] 自定义主题服务报错 HOT 2
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 element.