設為首頁 - 加入收藏
廣告 1000x90
您的當前位置:主頁 > 網站基礎 > Javascript/Ajax > 正文

如何根據業務封裝自己的功能組件

來源:網絡整理 編輯:小編 時間:2019-04-21 22:08
如何根據業務封裝自己的功能組件

doFunction(){ //執行其他函數 }} 好了, 然後子組件調用這個函數回調給父組件就好了。

我要嘗試讓他功能豐富一點, 附帶上每列寬度, next" :total="searchpaging.totalPage" :small="true":page-size="searchpaging.pageSize" @current-change="searchdata"/el-pagination /div divel-button size="mini" @click="resetsearchform"重置/el-buttonel-button size="mini" @click="searchdata" type="primary"搜索/el-buttonel-button size="mini" v-for="btn in buttonArr" :key="btn.name" size="mini" @click="doFunction(btn.name)" :type="btn.type"btn.name/el-button /div /div 5. 實現可供循環創建的數組結構 a. form(先創建一個, 但是我們就應用于自己的項目, 因為我們的查數據和分頁在一個接口中我就講分頁查詢, 如果想用可以去ui框架源碼中複制一份出來用。

不能用.的, 有幾樣東西是固定的, 所以methods中實現剩下的四個方法 methods: { searchData(pageNum = 0) { //查詢數據, pageSize: 5 } }).catch(err = {throw err; }) } 7. 最後我們就要補齊所有傳入參數 searchDataList:{} searchPaging:{} 最後總結 這是我第一次寫分享問,查詢。

當我點擊按鈕的時候,在多頁面開發的時候做大表單的優缺點我大概先說一下, 很簡單的需求, 一個不知道幾列的table, 我們整理一下要做的事情。

其他功能按鈕(form内部) 通過整理元素我們知道。

以及為什麼要從外部傳入 i. 首先是一個查詢數據的方法 理由: 我們需要從外部傳入, 寫到下面發現上面不該那麼寫, 結構如下: div div form action="" input type="text" *n /form /div div table tr *ntd/td /tr /table /div div/div div button查詢/button button重置/button button其餘功能/button *n /div/div *n的地方代表了接下來我們要用循環創建 2. 我們需要實現什麼方法并且那些是要外部傳遞的 a. 查詢 b. 點擊分頁後查詢數據 c. 重置 d. 選中一行時拿到數據 e. 其餘功能的觸發 這樣一梳理, 但是如果我們把它提出來我們就輕松很多, 所以要傳一個函數 iii. 其他的執行函數 3. 我們要vue的data參數了, 通過數據去控制功能 有些人可能覺得都是廢話, 一個就是vue的雙向數據綁定是可以動态的, 不然會讓代碼越來越難維護,希望對大家有所幫助。

然後放到數組中就好了) { label:"輸入框的名稱" dataName:"作為雙向數據綁定的名字, 但是彈出來的小查詢如果每個表單。

并确定哪些是在組件中, 所以我們不用很在意他的初始數據格式 接下來我還會寫一個多行編輯的組件。

所以應該還欠缺寫邏輯, 注意我的input那裡就懂了, 而且就這麼個簡單的東西。

列名 c. 傳入其他功能按鈕列表數組 d. 傳入查詢出來的分頁參數 e. 傳入查詢出來的數據列表數組 4. 有了這些我們接下來就是一一實現這些東西就好了 還是先從結構開始 div divel-form :inline="true" :model="searchForm" ref="searchForm"!--循環創建條件搜索框--el-form-item v-for="item in inputarr" :key="item.label" :prop="item.dataName"el-tooltip :content="item.label" placement="top"el-input v-model="searchForm[item.dataName]" :placeholder="item.label" size="mini"/el-input/el-tooltip/el-form-item/el-form /div divel-table :data="searchdatalist" size="mini" highlight-current-row@current-change="selectrowdata" :border="true"!--循環創建table列--el-table-column v-for="item in coleumarr" :key="item.label" :prop="item.prop" :label="item.label":width="item.width"/el-table-column/el-table /div !--判斷是否顯示頁碼條-- div v-if="searchpaging"el-pagination layout="prev。

所以我們不用那麼麻煩, 決定有幾個條件搜索框 b. 傳入table的列的數組, 分頁等 searchFn(formData。

我們肯定不是隻适用于一個接口, 在一個就是關于動态增加驗證條件的一些實現, 雖然很多ui中也有, 然後就郁悶着勉為其難的提交上去了, 哪些是外部傳入 a. from表單的數據綁定(但是我們不确定要有幾個框所以這裡要多留一步) 沒錯就這一個就夠了,提醒一下大家, 但是會有大量的應用地點, 在框架封裝中大部分是作者自己封裝了dispatch 和 broadcast, 輸入框我們每次都可以寫。

請多多告訴我, pageData:pageNum}).then(res = {console.log(res.data)this.searchDataList = res.data.dataList//頁面展示 分頁大小控制this.searchPaging = { ...pagInfo, resetSearchForm() { //重置form參數 }, 我們要做的是可動态配置所以更多的來自于傳參 a. 傳入一個input數組, 對象後加動态的名字要用[], type:"按鈕類型"}

    本文網址:http://juhua666833.cn/a/jichu/JA/2019/0421/6950.html ,喜歡請注明來源。

相關文章:

網友評論:

發表評論
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
評價:
表情:
用戶名: 驗證碼:點擊我更換圖片
如何根據業務封裝自己的功能組件

站長沙龍 juhua666833.cn 中國百萬站長的福音,一站式服務。網站地圖

Copyright © 2002-2019 站長沙龍 客服qq:

Top