Vuejs和ElementUi的插槽过滤器

编程问答 2022-08-15

问题描述

我有一张表，其中的一列使用slot-scope，但我无法将该列数据放入过滤器选项。

代码

Component filter input 

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

component HTML

问题部分被评论

<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

我在过滤器功能中提供了更多列示例，因此您可以了解element-ui表背后的逻辑

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

是否知道如何将条形码数据包含在过滤器输入中？

解决方法

下一次https://www.njleonzhang.com/vue-data-tables/#/en-us/时，最好在element-ui上提到扩展名））

但是要问您要在barcode上过滤的道具，您必须编写自己的filterFn，因为el-table-column上没有定义道具，所以道具是{ {1}} https://www.njleonzhang.com/vue-data-tables/#/en-us/filter?id=leverage-filterfn

也请看一下https://www.njleonzhang.com/vue-data-tables/#/en-us/filter?id=principle-of-data-tables39-filter

提供的图表

如果您不想使用undefined，也可以使用vue-data-tables数据集，如element-ui页面上的示例所示：https://element.eleme.io/#/en-US/component/table#table-with-custom-header

javascriptvue-data-tablesvue.js