Ggtcf

I want to search by tc number in the table. I took advantage of https://element.eleme.io/#/en-US/component/table. But I get an error as follows.

"TypeError: Cannot read property 'filter' of null"

The code I wrote is as follows.

<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>

There are several error in your code please refer this code.

fiddle - 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')