В компоненте «el-table» библиотеки Vue.js, если вы хотите добавить ID к определенной ячейке таблицы для перехода на страницы, вам нужно использовать кастомные рендер-функции.
Первым шагом является создание кастомной функции рендеринга, которую вы передадите в свойство «render» элемента «el-table-column». В этой функции вы будете иметь доступ к данным ячейки и можете использовать их для создания различных элементов, таких как ссылки или кнопки, и добавление нужных атрибутов, включая ID.
Давайте рассмотрим пример. Предположим, у нас есть массив объектов «products», каждый из которых представляет отдельный продукт со свойствами «id», «name» и «price». Мы хотим создать таблицу с колонками «ID», «Name» и «Price», где ID будет ссылкой для перехода на страницу с подробной информацией о продукте.
<template>
<el-table :data="products">
<el-table-column prop="id" label="ID" :render="renderId"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="price" label="Price"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
products: [
{ id: 1, name: 'Product 1', price: 10 },
{ id: 2, name: 'Product 2', price: 20 },
{ id: 3, name: 'Product 3', price: 30 }
]
};
},
methods: {
renderId(h, { row }) {
return h('a', {
domProps: {
innerHTML: row.id
},
attrs: {
href: `/product/${row.id}`
}
});
}
}
};
</script>
В этом примере функция renderId принимает два параметра: h (ссылка на элемент Vue) и context (объект, содержащий различные данные о ячейке). Мы используем h для создания элемента a и устанавливаем его внутреннее содержимое равным значению row.id. Затем мы добавляем атрибут href с использованием значения row.id, чтобы создать ссылку на страницу с подробной информацией о продукте.
Итак, каждая ячейка в столбце «ID» будет отображать ссылку с соответствующим ID продукта и переходить по ней на соответствующую страницу с подробной информацией о продукте.
Надеюсь, это поможет вам разобраться, как добавить ID для перехода на страницы в элементе «el-table» библиотеки Vue.js.