問卷調查 自定義表單設計vue

2021-09-24 18:59:11 字數 788 閱讀 2748

於此記錄開發過程

純vue開發,無jquery,資料驅動頁面。

引入檔案:iconfont 圖示檔案,vue.min.js,彈框外掛程式(提示選項不能少於兩項)

左側為題型,右側是form表單,所有資料儲存在list中。

主要功能:

左側新增題型【單選題、多選題、打分題】

右上角新增題型-------插入當前題型,並且在當前下方插入

複製問題-------複製當前問題與當前資料填寫值,並且在當前下方插入

刪除問題-------刪除當前問題

新增問題選項

刪除問題選項(至少留兩項,彈框提示不能再刪了)

實現思路

建立list列表,約定題型資料結構;

頁面布局規劃,編寫頁面資料渲染,通過v-if判斷type選擇渲染題型模式;

從簡單的新增開始,push一條新題型資料,頁面即會新增一條對應題型;

刪除資料,頁面觸發刪除事件,傳對應引數於方法內,執行splice 刪除對應陣列的資料;

複製資料,由於資料結構為物件型別,需要進行深拷貝,否則為賦值記憶體位址,實則為同一資料,統一修改;

選項的新增與刪除,為巢狀操作,頁面觸發事件需傳(type,此條問題資料標識id,當前選項id),增刪方法依舊為運算元組;

自定義表單設計

表 單 設 計 一 設計目的 可以根據不同業務表單自定義生成表單,並能根據生成後的表單設計顯示風格。表單使用中表單資料會根據不同表單入庫到對應的資料庫,並根據設計時所定義的條件自動生成查詢或報表功能。解決這個問題後處理一般的業務程式就不用程式設計師手工製表和重寫 而是直接讓使用者圖形化設計。這將給使...

寬度 表單 使用vue製作自定義表單 1 設計

希塔資料 搭建定製管理平台及報表系統 目錄 zhuanlan.zhihu.com 由於這一塊從設計到編碼涉及的篇幅會很長,所以分開一點一點的講解,如何使用vue以及django來實現這樣乙個系統,如果大家有興趣,關注一下我們,收藏一下專欄,謝謝!搭建定製管理平台及報表系統 zhuanlan.zhih...

兩種自定義表單設計方案 原創

最近參與乙個專案,客戶要求提供自定義表單的功能。主要的要求是 能夠對表單的字段進行增刪改,對顯示表單的格式可以靈活定製。由於客戶的表單變動可能比較頻繁,所以決定實現自定義表單功能。初步設想出以下兩種自定義表單的解決方案,目前只涉及到表單的顯示方案。html 概述 採用html模板方式。對於每一種樣式...