Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

PetroGromovo's avatar

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",
0 likes
0 replies

Please or to participate in this conversation.