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
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70008684/viewspace-2839452/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 自定義表格
- antd 自定義展開表格
- ElementUI 中 table 表格自定義表頭 Tooltip 文字提示UI
- vue中elementUI的表格實現自定義編輯VueUI
- ElementUI的Table表格新增自定義頭CheckBox多選框UI
- C# 將Excel轉為PDF時自定義表格紙張大小C#Excel
- 前端自定義元件,表單顠浮層( 動態表格,靜態引用)前端元件
- Element-Plus表格:Table自定義合併行資料的最佳實踐
- android自定義view(自定義數字鍵盤)AndroidView
- netty自定義Decoder用於自定義協議Netty協議
- 如何在 SAP Fiori Elements List Report 表格工具欄裡增添新的自定義按鈕
- 基於JQuery的自定義樹形選單表格,實現展開、收起效果jQuery
- 自定義VIEWView
- 自定義SnackBar
- 自定義_ajax
- 自定義 Anaconda
- 自定義ClassLoader
- 自定義QTimeEditQT
- 自定義 tabBartabBar
- tailwind自定義AI
- 自定義 GitGit
- 自定義元件元件
- 自定義LinkedList
- 自定義useState
- vue自定義全域性元件(或自定義外掛)Vue元件
- Layui資料表格 加入 自定義擴充套件方法(重新渲染Render當前頁資料)UI套件
- 4. 自定義控制元件(4) --- 自定義屬性控制元件
- Android 自定義View:深入理解自定義屬性(七)AndroidView
- MySQL自定義排序MySql排序
- JavaScript自定義事件JavaScript事件
- Maven 自定義archeTypeMaven
- SpringBoot 自定義 starterSpring Boot
- 自定義的PopupWindow
- 自定義元件——TitleView元件View
- 自定義目錄
- 自定義 Artisan 命令
- 自定義型別型別
- Gradle 自定義 pluginGradlePlugin