vue-table自定义表格数据 4年前

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