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>

更多建站及原始碼交易資訊請見 GoodMai