我想在表中搜索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')