實現效果：
table上面增加乙個按鈕，按鈕觸發乙個model頁面，裡面是checkbox元件，提供表頭欄位的選擇。
選中那個字段，table呈現那個字段。
/*從systemtablecolumn表中獲取表的每一字段的資訊*/
const listcolsbytable = () => axios.get(config.host + '/systemtablecolumn/listcolsbytable',
}).then(function (response) ).catch(function (error) );
class carbrand extends react.component ,
searchform: null,
searchparam: {},
data: ,
checkboxs:, /* 表頭編輯框裡面展示的資料 */
columnvisible :false, /* 表頭編輯框是否可見 */
columns:,/* table的乙個props */
colobjs:,/* table的每個欄位的詳細資訊，從資料庫裡面獲取到的 */
cols:/* table展示的col的english的名字的陣列 */
};componentdidmount()
start = (currenpage, searchparam) => ;
if (currenpage)
this.setstate();
listplan(pager, searchparam).then(res =>
if (!res || !res.pager)
const pagination = {};
pagination.total = res.pager.totalcount;
pagination.current = res.pager.pagenumber;
this.setstate();
res && res.data && this.setstate();
});/*配置的資訊儲存在 this.state.colobjs */
listcolsbytable().then(res=>
/*最初始的cols*/
let cols=res.data.map((obj)=>obj.column)
res && res.data && this.setstate();
this.colchange(cols)
})};
refsearchform = (form) => ;
handlesearch = (e) => );
const pagination = {};
listplan(pagination, values).then(res => ;
pagination.total = res.pager.totalcount;
pagination.current = res.pager.pagenumber;
this.setstate();
res && res.data && this.setstate();
});});
};handletablechange = (pagination, filters, sorter) => ;
/*checkbox的配置介面的生成*/
setparam=()=>
})return ()})
this.setstate();
}/*隱藏表頭編輯框*/
hidemodal = () => );
}/*針對每次傳入的cols生成新的columns*/
colchange=(cols)=>
})if(type==='datetime')})
}if(!type))}
return null
})if(columns.length===0)
this.setstate();
}render()
>
篩選,}
}onchange=
/>);}
}export default carbrand;
可配置字段型別el table表頭自適應的兩種方案
專案場景 可以選擇展示哪些label的可配置字段型別el table 由於要求做中英雙版，因此表頭自適應這個功能尤為重要 有些英文label實在太長了 已經把專案頁面塗了馬賽克，不知道還會不會被舉報，新人寫部落格這方面不是很懂 霧 理想情況 滿足所有欄位的表頭寬度都能自適應，且如果選擇顯示的字段太少...
面板可配置化 變數 樣式分離
之前 開發了乙個版本，抽是抽出來了，但是變數只抽出了幾個顏色，沒什麼價值 上個版本開發過程 這次我又進行了一次迭代，現在是乙個較成熟的版本了。整體理一下思路，可以總結為3步走和2層架構 是樣式的子集，想要做 的管理，首先要把涉及到的樣式都抽取出來，這裡只涉及到了 登入頁 考勤頁 頂部選單 3個部分。...
切面定義可配置化及重複註解
專案在這兩個方面進行了 1.切面自定義 一般地，切面都是這樣定義的，由於 pointcut無法通過 注入，所以這個類很難框架化，都需要在業務方法中寫，比較麻煩，下面記錄一種可以配置此值的方式。aspect component pointcut execution public top.jfunc.v...