[英]Slot filter with Vuejs and ElementUi
我有一个表,其中的一列使用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
我在过滤器 function 中提供了更多列示例,以便您了解
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>
知道如何将条形码数据包含到过滤器输入中吗?
也许下次在 element-ui 上提到扩展会更好https://www.njleonzhang.com/vue-data.tables/#/en-us/ ;)
但是要回答您要在barcode
上过滤的道具的问题,您必须编写自己的filterFn
,因为在el-table-column
上没有定义道具,因此道具undefined
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
如果您不想使用vue-data.tables
,您也可以使用computed
数据集,如 element-ui 页面上的示例所示: https://element.eleme.io/#/en-US/component /table#table-with-custom-header
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.