資訊專欄INFORMATION COLUMN
摘要：項目中，組件是項目的基石，每個頁面都是組件來組裝起來，我司沒有自己的組件庫，選用的是組件庫，在它的基礎(chǔ)上再次封裝。部分代碼三級效果如下總結(jié)組件是項目的積木條，公用組件的封裝成功與否其實是對項目的開發(fā)效率有直接影響。
vue項目中，組件是項目的基石，每個頁面都是組件來組裝起來，我司沒有自己的組件庫，選用的是ElementUI組件庫，在它的基礎(chǔ)上再次封裝。
可編輯表格由于是后臺管理項目，各種單據(jù)漫天飛，而且單據(jù)列表要可編輯，可驗證，基于業(yè)務(wù)封裝了可編輯表格組件
業(yè)務(wù)需求：
每列可以編輯
每列輸入的值需要被驗證
每列可編輯，則需要每列的字段需要一個可編輯的屬性edit來確定是否可以編輯，輸入的值可以被驗證，需要我們傳入驗證規(guī)則。
確認需要傳入的propsprops: {
// 表格數(shù)據(jù)
tableData: {
type: Array,
default: () => []
},
// 需要驗證的列字段
columns: {
type: Array,
default: () => []
},
// 是否可編輯
defaultEdit: {
type: Boolean,
default: true
},
// 驗證集合
verifyRules: {
type: Object,
default: () => {}
}
}
表格傳入數(shù)據(jù)后，初始化可編輯狀態(tài)
閱讀el-table源碼，可以看到，表格組件擁有自己的store，一些需要通信的狀態(tài)都是它來維護的，我們也可創(chuàng)建一個自有的table-store.js來維護編輯狀態(tài)
// 初始化數(shù)據(jù)
this.store = new TableStore({
list: this.tableData,
columns: this.columns,
defaultEdit: this.defaultEdit
});
可編輯列edit-table-cell
利用slot插槽來傳遞編輯狀態(tài)和驗證規(guī)則
使用組件... computed: { isInput() { return this.slotName === "input"; }, rowState() { const states = this.editTable.store.states; const rowState = states.get(this.row); return rowState; }, cellState() { const cellState = this.rowState.get(this.prop); return cellState; } }, methods: { // 驗證 validateCell(cb) { this.editTable .verifyTableCell(this.row, this.prop, this.cellState) .then(errMsg => { const valid = !errMsg; typeof cb === "function" && cb(valid); }); } }
// edit-table.vue{{ scope.$index + 1 }} .... {{ row.categoryName }}
效果如下
具體代碼可查看組件
增刪改的樹組件el-tree樹形組件其實已經(jīng)支持了自定義節(jié)點內(nèi)容，但是我們要在它的基礎(chǔ)上改變節(jié)點內(nèi)容，這里主要是運用了Vue.set向響應(yīng)式對象中添加一個屬性。
// 部分代碼
append(node, data) {
const { label } = this.configProps;
const newChild = {
id: id++,
[label]: `三級-${id}`,
children: [],
isEdit: false
};
if (!data.children) {
this.$set(data, "children", []);
}
data.children.push(newChild);
this.$emit("addNode", node, data);
},
edit(node, data) {
if (!node.isEdit) {
this.$set(node, "isEdit", true);
}
this.$nextTick(() => {
this.$refs[`treeInput${node.id}`].focus();
});
this.$emit("editNode", node, data);
}
效果如下：
總結(jié)組件是項目的積木條，公用組件的封裝成功與否其實是對項目的開發(fā)效率有直接影響。具體代碼可查看vue-template，基于vue-cli3.0搭建的后臺模版。
webpack常規(guī)打包優(yōu)化方案
組件通信處理方案
后臺管理項目總結(jié)
項目部署
參考：
ElTable
el-table-editabled
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/105141.html
摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內(nèi)容早已過期或是很多近期優(yōu)秀組件未被收錄，所以小肆今天重新更新了內(nèi)容并新建項目。提交的項目格式如下項目名稱子標(biāo)題相關(guān)介紹如果收錄的項目有錯誤，可以通過反饋給小肆。 前言 本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內(nèi)容早已過期或是很多近期優(yōu)...
摘要：注此項目純屬個人瞎搞，正常下單請選擇餓了么官方客戶端。目前下單功能已經(jīng)實現(xiàn)，下單功能完全采用官網(wǎng)真實數(shù)據(jù)，可以控制官網(wǎng)發(fā)短信或者打電話到指定的手機號碼，下單后可以在手機中查看并且付款。 前言 vue2的發(fā)布后自己也研究了一段時間，奈何公司的技術(shù)棧是以react為主，沒有機會好好利用vue2去做一個完整的項目。雖然寫了幾個demo，但和寫一個完整的項目還是有很大差別的。于是自己想著用空余...
摘要：原因如下影響使用的小有點多需要重新學(xué)習(xí)一門語言接下來詳述?；跇?biāo)準(zhǔn)化技術(shù)，可以最大限度的避免浪費。會廣播特定的事件，這些事件無法被捕獲，只能在的鉤子里手工綁定。左右看了看，準(zhǔn)備先試下。希望你們再接再厲，相信將來這套庫會更好。 不確定寫多長，寫先結(jié)論吧：暫時不推薦使用。原因如下： 影響使用的小 Bug 有點多 需要重新學(xué)習(xí)一門語言 接下來詳述。 從前司離職之后，我開始更新技術(shù)棧。離...
閱讀 2770·2021-11-23 09:51
閱讀 3529·2021-10-08 10:17
閱讀 1261·2021-10-08 10:05
閱讀 1309·2021-09-28 09:36
閱讀 1833·2021-09-13 10:30
閱讀 2174·2021-08-17 10:12
閱讀 1670·2019-08-30 15:54
閱讀 2004·2019-08-30 15:53
