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

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据