I am facing an issue with a table where one of the columns is using slot-scope, and I am struggling to include that column data into the filters option.
Code
Component filter input
<el-input v-model="filters[0].value" placeholder="Type to filter"></el-input>
component HTML
The problematic part is currently commented out
<data-tables class="bg-white shadow-sm"
:data="transits"
:filters="filters"
style="width: 100%">
<el-table-column prop="name" label="Name" sortable="custom"></el-table-column>
<el-table-column label="Barcode" sortable="custom"> <!-- unable to integrate this data into filter -->
<template slot-scope="scope">
<div v-if="scope.row.barcode.serial_number">
{{scope.row.barcode.serial_number}}
</div>
<template v-else>
{{scope.row.barcode.u_serial_number}}
</template>
</template>
</el-table-column>
</data-tables>
Component Script
I have provided more sample columns in the filters function for better understanding of the logic behind the
element-uitable
<script>
export default {
props: ['user'],
name: "adminOuterTransits",
data() {
return {
transits: [],
filters: [
{
value: '',
prop: ['formNo', // works (belongs to transit table)
'receiptNo', // works (belongs to transit table)
'description', // works (belongs to transit table)
'fob', // works (belongs to transit table)
'gudang', // works (belongs to transit table)
'ship_via', // works (belongs to transit table)
'sent_at', // works (belongs to transit table)
'received_at', // works (belongs to transit table)
'barcode'], // DOESN'T WORK (IT'S RELATIONSHIP DATA "barcode.serial_number")
}
]
}
},
// rest of it....
}
</script>
Does anyone know how to add the barcode data to the filter input?