关于vue.js:vuetable自定义表格数据

<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>

更多建站及源码交易信息请见 GoodMai