vue-table自定义表格数据
<template>
<v-app>
<v-main>
<v-btn class="error" @click="btnClick">测试</v-btn>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th>Узел</th>
<th>Наименование работы</th>
<th>Код</th>
<th>Длительность (часы)</th>
<th>Стоимость</th>
<th></th>
</tr>
</thead>
<tbody>
<tr
v-for="vert in verticies"
:key="vert.name">
<td class="pa-4">
<div class="text-h6" :style="{color: $vuetify.theme.themes.light.primary}">
{{ vert.init ? 'S' : '' }}{{ vert.childrens.length == 0 ? 'F' : '' }}
</div>
</td>
<td class="pa-4">
<v-text-field
outlined
label="Наименование работы"
v-model="vert.name"
hide-details
></v-text-field>
</td>
<td class="pa-4">
<v-text-field
outlined
label="Код"
v-model="vert.code"
hide-details
></v-text-field>
</td>
<td class="pa-4">
<v-text-field
outlined
label="Длительность"
suffix="Часов"
v-model="vert.duration"
hide-details
></v-text-field>
</td>
<td class="pa-4">
<v-text-field
outlined
label="Стоимость"
suffix="Руб."
v-model="vert.price"
hide-details
></v-text-field>
</td>
<td class="pa-4">
<v-btn
icon
color="error">
<v-icon> mdi-delete-outline</v-icon>
</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-main>
</v-app>
</template>
<script>
export default {
name: "GraphDrawer",
data: () => ({
verticies: [
{x: 1, y: 1, init: 'S', childrens: [{x: 1, y: 1}], name: '赵云', code: 101, duration: '长枪', price: 15},
{x: 1, y: 1, init: 'S', childrens: [{x: 1, y: 1}], name: '张飞', code: 102, duration: '蛇矛', price: 16},
{x: 1, y: 1, init: 'S', childrens: [{x: 1, y: 1}], name: '刘备', code: 103, duration: '双股剑', price: 17}
],
result: [],
}),
mounted() {
},
methods: {
btnClick(){
console.log(this.verticies);
}
}
}
</script>
