Mar 6, 2025
0
Level 5
How to fill select el-table-column's filters property of element-plus programmatically?
I added element-plus on laravel/vue site and using filter in data listing managed to work with it code:
<el-table-column prop="priority_label" label="Priority" sortable width="140" :filters="[
{ text: pointSelectionItems[0].label, value: pointSelectionItems[0].value },
{ text: pointSelectionItems[1].label, value: pointSelectionItems[1].value },
{ text: pointSelectionItems[2].label, value: pointSelectionItems[2].value },
{ text: pointSelectionItems[3].label, value: pointSelectionItems[3].value },
]" :filter-method="filterHandler('priority')" />
But data of pointSelectionItems is php enum originally, I dislike to pass options in this way.
It does not the way it works in for select:
<el-form-item label="Point">
<el-select v-model="form.task_category_id" placeholder="Select task point">
<el-option
v-for="item in pointSelectionItems"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
as :filters= is defined inside of <el-table-column component
Here https://element-plus.org/en-US/component/table.html#grouping-table-head I read :
filters an array of data filtering options. For each element in this array, text and value are required.
But how to fill it programmatically ?
"@inertiajs/vue3": "^2.0.0",
"vue": "^3.4.0"
"element-plus": "^2.9.5",
Please or to participate in this conversation.