摘要：基于這種思路，那留給我們的只有兩步，組件設(shè)計和數(shù)據(jù)設(shè)計。關(guān)于組件的相關(guān)邏輯，可能要在文章里面一次性說清楚，還是需要費很大的精力，不過希望數(shù)據(jù)驅(qū)動的思想能夠讓之前沒有體會到這種開發(fā)樂趣的小伙伴們有到新的想法。

在日常開發(fā)中，我們肯定不止一次碰到重復(fù)的業(yè)務(wù)代碼，明明功能相似，但總沒思路去把它封裝成組件。關(guān)于封裝組件，希望這篇文章能帶給大家新的思路，去更高效的完成日常開發(fā)。（注：例子都是基于ElementUI, 但思路都是一樣的）

示例地址-> https://www.lyh.red/admin

代碼地址

構(gòu)建頁面：設(shè)計數(shù)據(jù)結(jié)構(gòu)（綁定value，綁定事件，相關(guān)屬性）-> 生成dom -> dom綁定相關(guān)

監(jiān)聽事件：操作UI -> 觸發(fā)事件 -> 更新數(shù)據(jù) -> 更新UI

數(shù)據(jù)驅(qū)動是基于數(shù)據(jù)觸發(fā)的，在編寫業(yè)務(wù)的時候，只需要編寫好組件的dom結(jié)構(gòu)，之后我們便可以不用再去關(guān)心dom層，只需要關(guān)心數(shù)據(jù)就ok。
基于這種思路，那留給我們的只有兩步，組件設(shè)計和數(shù)據(jù)設(shè)計。

搜索欄配置以及生成效果

      // 過濾相關(guān)配置
      filterInfo: {
        query: {
          create_user: "",
          account: "",
          name: ""
        },
        list: [
          {type: "input", label: "賬戶", value: "account"},
          {type: "input", label: "用戶名", value: "name"},
          // {type: "select", label: "創(chuàng)建人", value: "create_user"},
          // {type: "date", label: "創(chuàng)建時間", value: "create_time"},
          {type: "button", label: "搜索", btType: "primary", icon: "el-icon-search", event: "search", show: true},
          {type: "button", label: "添加", btType: "primary", icon: "el-icon-plus", event: "add", show: true}
        ]
      }

表格配置以及生成效果

      // 表格相關(guān)
      tableInfo: {
        refresh: false,
        initCurpage: false,
        data: [],
        fieldList: [
          {label: "賬號", value: "account"},
          {label: "用戶名", value: "name"},
          {label: "性別", value: "sex", width: 80, list: "sexList"},
          {label: "賬號類型", value: "type", width: 100, list: "accountTypeList"},
          {label: "狀態(tài)", value: "status", width: 90, list: "statusList"},
          {label: "創(chuàng)建人", value: "create_user"},
          {label: "創(chuàng)建時間", value: "create_time", minWidth: 180},
          {label: "更新人", value: "update_user"},
          {label: "更新時間", value: "update_time", minWidth: 180}
        ],
        handle: {
          fixed: "right",
          label: "操作",
          width: "180",
          btList: [
            {label: "編輯", type: "", icon: "el-icon-edit", event: "update", show: true},
            {label: "刪除", type: "danger", icon: "el-icon-delete", event: "delete", show: true}
          ]
        }
      }

dom配置和完整頁面

參數(shù)設(shè)計

搜索參數(shù)query，比如要查詢的參數(shù)有賬號，名字。

dom相關(guān)屬性設(shè)計

首先要考慮dom的類型，和顯示，這是基本的，還有擴(kuò)展類型，比如事件可以設(shè)置event屬性，是否顯示設(shè)置show屬性，這些是比較通用的。
而基于不同類型的dom，如果是input，select，datetime類型的dom，作為一個承載數(shù)據(jù)的容器，則需要一個value屬性去和query中的屬性名對上，除此之外不同類型的dom還有不同的特定屬性，比如select需要提供對應(yīng)的list，datetime需要相關(guān)的pickersOptions去限制時間范圍，如果是按鈕，比如el-button,則可以設(shè)置icon，按鈕相關(guān)type。

最終實現(xiàn)：

filterInfo: {
        query: {
          create_user: "",
          account: "",
          name: ""
        },
        list: [
          {type: "input", label: "賬戶", value: "account"},
          {type: "input", label: "用戶名", value: "name"},
          // {type: "select", label: "創(chuàng)建人", value: "create_user"},
          // {type: "date", label: "創(chuàng)建時間", value: "create_time"},
          {type: "button", label: "搜索", btType: "primary", icon: "el-icon-search", event: "search", show: true},
          {type: "button", label: "添加", btType: "primary", icon: "el-icon-plus", event: "add", show: true}
        ]
      }

循環(huán)的dom列表

先考慮設(shè)計的這個dom需要什么屬性

比如dom是el-input，一個輸入框，可以設(shè)置是否禁止disabled，可以設(shè)置是否可清空clearable，v-model要綁定的數(shù)據(jù)，設(shè)置dom的class名，設(shè)置dom綁定的事件。
比如dom是el-select， 除了上面這些屬性，我們還需要這個元素可循環(huán)的list

最終dom結(jié)構(gòu)為：

    

      
      
      
      
      
      
        
      
      
      
      
      
      
      
      
      {{item.label}}