vue.js - vuejs 搜索过滤器“TypeError:无法读取 null 的属性‘过滤器’”
问题描述
我想按表中的 tc 编号搜索。我利用了https://element.eleme.io/#/en-US/component/table。但我收到如下错误。
“TypeError:无法读取 null 的属性‘过滤器’”
我写的代码如下。
<template>
<div class="app-container">
<div class="filter-container">
<el-input :placeholder="TC arama" v-model="search" style="width:
200px;" class="filter-item"/>
</div>
<el-table
:data="list.filter(data => !search ||
data.tc.toLowerCase().includes(search.toLowerCase()))"
border
fit
highlight-current-row
style="width: 100%;">
<el-table-column :label="ID" prop="id" width="65"/>
<el-table-column :label="TC" prop="tc" min-width="110px"/>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
filter: '',
search: '',
list: [{
id: 1,
tc: "12345678944"
}, {
id: 2,
tc: "25639874532"
}, {
id: 3,
tc: "23669874120"
}]
}
}
}
</script>
解决方案
您的代码中有几个错误,请参考此代码。
小提琴 - https://jsfiddle.net/9px5sba7/
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.6.1/lib/index.js"></script>
<div id="app">
<template>
<el-table
:data="tableData.filter(data => !search || data.tc.toLowerCase().includes(search.toLowerCase()))" border
fit
highlight-current-row
style="width: 100%">
<el-table-column
label="Id"
prop="id">
</el-table-column>
<el-table-column
label="Tc"
prop="tc">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="Type to search"/>
</template>
</el-table-column>
</el-table>
<div class="filter-container">
<el-input placeholder="TC arama" v-model="search" style="width:
200px;" class="filter-item"/>
</div>
<el-table
:data="tableData.filter(data => !search ||
data.tc.toLowerCase().includes(search.toLowerCase()))"
border
fit
highlight-current-row
style="width: 100%;">
<el-table-column label="ID" prop="id" width="65"/>
<el-table-column label="TC" prop="tc" min-width="110px"/>
</el-table>
</template>
</div>
var Main = {
data() {
return {
tableData: [{
id: 1,
tc: "1233",
},{
id: 1,
tc: "234",
}],
search: '',
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
},
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
推荐阅读
- c++ - 为什么我班的这个功能不起作用?
- javascript - 无法读取未定义的属性“过滤器”,React.js
- python - 多个@app.route / 函数(python / sqlite3)之间的数据传输
- javascript - 如何在 JS React 中为 CSS 重写 -webkit-***
- flutter - 使用 flutter_callkeep 通知 Agora
- java - 如何使用 Jackson 或格式错误的请求自定义 Spring Rest Controller 错误
- python - 为什么crontab不能启动safari驱动
- apache-spark - Spark Structured Streaming 在创建应用程序后立即停止
- android - 如何检测是否有 chromecast 设备连接到 Android 电视?
- node.js - nodejs pg-pool 似乎没有池化