2

I have table where a column in there uses slot-scope and I can't get that column data into filters option.

Code

Component filter input

<el-input v-model="filters[0].value" placeholder="Type to filter"></el-input>

component HTML

issue part is commented

<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"> <!-- can't get 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 gave more column sample in filters function so you can understand the logic behind element-ui table

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

Any idea how to include barcodes data into filter input?

dreijntjens
  • 4,577
  • 26
  • 28
mafortis
  • 6,750
  • 23
  • 130
  • 288
  • you'd like to apply filter for `barcode` column based on rendered text? And I don't find `el-table` provides one props=`filters` from [Element-UI guide](https://element.eleme.cn/#/en-US/component/table#table-attributes). But `el-table-column` provides. – Sphinx Aug 20 '20 at 17:49
  • @Sphinx hi, `you'd like to apply filter for barcode column based on rendered text?` Yes. `And I don't find el-table provides one props=filters` it's in table `:filters="filters"`. would you mind share your solution as an answer so I can see where i did mistake? – mafortis Aug 21 '20 at 04:08
  • from the answer of @dreijintjens, I realized you used the extension `vue-data-table`, not the default table component `el-table` in Element-UI. – Sphinx Aug 21 '20 at 16:17

1 Answers1

0

Maybe it is better to mention the extension on element-ui next time https://www.njleonzhang.com/vue-data-tables/#/en-us/ ;)

But to get to your question the prop you want to filter on barcode you have to write your own filterFn as there is no prop defined on the el-table-column so the prop is undefined https://www.njleonzhang.com/vue-data-tables/#/en-us/filter?id=leverage-filterfn

Also take a look on the diagram that is provided https://www.njleonzhang.com/vue-data-tables/#/en-us/filter?id=principle-of-data-tables39-filter

If you don't want to use vue-data-tables you could also work with a computed dataset as done in the example on the element-ui page: https://element.eleme.io/#/en-US/component/table#table-with-custom-header

dreijntjens
  • 4,577
  • 26
  • 28