vue.js - Vue - 如何在 Vuetify 数据表的每一行中添加一个按钮?
问题描述
我是 Vue 的新手,我正在处理数据表。我正在使用 Vuetify 的数据表创建一个组件,该组件在页面加载时向我的后端发送请求,接收一些数据并在数据表上显示该数据。
这是我当前的代码:
<template>
<v-data-table
:headers="headers"
:items="balances"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</template>
<script>
export default {
data() {
return {
search: '',
headers: [
{ text: 'Asset', value: 'symbol' },
{ text: 'Amount', value: 'amount' },
],
balances: [],
}
},
mounted() {
this.fetchData()
},
methods: {
fetchData() {
fetch('MYURL')
.then(response => response.json())
.then(data => {
this.balances = data;
})
}
}
}
</script>
我现在面临的问题是向表中的每一行添加一个按钮,并且该按钮应该向我的后端发送带有该行数据的请求,因此我需要添加一个按钮,单击该按钮可以获取该行的数据. 有没有办法做到这一点?我尝试查看 Vuetify 的文档,但我没有发现很多关于这样的任务的信息。
解决方案
您可以添加一个新列,action
例如将 value 设置为,然后在表中添加 a slot
,如下所示:
new Vue({
el:"#app",
vuetify: new Vuetify(),
data() {
return {
search: '',
headers: [
{ text: 'Asset', value: 'symbol' },
{ text: 'Amount', value: 'amount' },
{ text: 'Send', value: 'action' }
],
balances: [
{ symbol: "$", amount: 100 },
{ symbol: "$", amount: 200 },
],
}
},
methods: {
sendRequest(rowData) {
console.log(rowData)
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<v-app id="app">
<v-data-table
:headers="headers"
:items="balances"
:items-per-page="5"
class="elevation-1"
>
<template v-slot:item.action="{ item }">
<v-btn @click="sendRequest(item)">
Send
</v-btn>
</template>
</v-data-table>
</v-app>
推荐阅读
- c# - 每次执行启动倒计时时,冷却计时器的速度都会加倍
- python - 如何用与元素相同的矩阵初始化块矩阵?
- python - 使用 selenium bs4 和 python 从网站中提取链接
- python - 如何在 Python 中按长度拆分输入
- vue.js - VueJS 中的条件 @click for
- python - Pyzbar 不适用于 Ubuntu
- python - 如何获得数据集中所有年份的最小值和月份?(熊猫)
- javascript - 在循环中使用 .add() 循环时收到未捕获的类型错误
- html - div 在另一个 div 上方的固定或粘性位置
- python - 如何从 html 中抓取图像 url?