**元件的整體思路是通過乙個 config 陣列生成列表的頭部表單：**/*
* data.ts
* * 資料型別 - table-header 元件
*/export class selectoptionitem
export class headerconfigitem
"table-header"
>
"true" :model=
"data" class=
"form--label-left" label-width=
"180px"
>
"20"
>
"8" v-for=
"item in config" :key=
"item.code"
>
"item.title" class=
"table-header-item"
>
"item.type === 'select'" v-model=
"data[item.code]" :placeholder=
"`請輸入$
`" :size=
"size" clearable>
"option in item.options" :key=
"option.value" :value=
"option.value" :label=
"option.label"
>
"data[item.code]" :placeholder=
"`請輸入$
`" :size=
"size"
>
"8" class=
"table-header_button"
>
"size" type=
"text" @click=
"reset"
>清空
"size" type=
"primary" icon=
"el-icon-search" @click=
"search"
>查詢
"getfilterlist" :config=
"tableheaderconfig" :data.sync=
"filterdata"
>
public tableheaderconfig: headerconfigitem=[,,
,],
},]
data 是整個表頭的資料物件，config 就是整個元件的配置項，由此渲染出頭部結構
這裡的 this._copy 是 data 的拷貝物件，在 mounted 的時候將 data 拷貝出來作為初始值，清空的時候再將這個初始值傳回去
這裡會涉及到在子元件中對父元件傳入的引數直接修改，所以需要用 sync 修飾符
public _copy: object =
mounted(
), this.data)
}
vue typescript 全域性引入lodash
全域性引入lodashprovideplugin是webpack用來自動載入模組的方法，全域性使用方式可以避免每個vue元件中都import lodash。npm i lodash s 安裝lodash 1 webpack.base.conf.js module.exports context pa...
封裝與解封裝
封裝與解封裝 封裝動作 從高層往低層依次封裝，在每一層使用特定的協議，對資料進行處理，在資料前新增特定的協議報頭。封裝原則 1 每一層在上一層資料前新增協議報頭 2 新增完協議報頭的整體，就是該層的pdu 3 每一層的pdu對於下一層來說就是上層資料 每一層的上層資料就是上層的pdu pdu 協議資...
pdo mysql 封裝 pdo mysql 封裝
namespace core 資料庫操作類 author chenyuwen class database 鏈結目標物件 var string protected db target null 使用者名稱 var string protected user name null 密碼 var stri...