用iView開發的源碼_程序員接私活必備的10個開源項目很多人還不知道！

① 程序員接私活必備的10個開源項目，很多人還不知道！

程序員在Web 開發中幾乎所有的平台都需要一個後台管理，但是從零開發一套後台控制面板並不容易，幸運的是有很多開源免費的後台控制面板可以給開發者使用，那麼有哪些優秀的開源免費的控制面板呢？我在 Github 上收集了一些優秀的後台控制面板，並總結得出 Top 10。

Github Star 數 24969 ，非常流行的基於 Bootstrap 3.x 的免費的後台 UI 框架。

Github Star 數 19546，一個基於 vue2.0 和 Eelement 的控制面板 UI 框架。

Github Star 數 15870，構建在 Bootstrap 4 之上的免費的 HTML 控制面板框架。

Github Star 數 15654，一個基於 Bootstrap 的免費的後台控制面板。

Github Star 數 13181，基於 Angular 2、Bootstrap 4 和 Webpack 的後台管理面板框架。

Github Star 數 12707。開箱即用的中台前端/設計解決方案。

Github Star 數 9241，基於 Angular 和 Bootstrap 的後台管理面板框架。

Github Star 數 8676，基於 Vue 和 Bulma 的控制面板。

Github Star 數 8668，基於 iView 的 Vue 2.0 控制面板。

Github Star 數 7111，基於 Bootstrap 4 和 Material 風格的控制面板。

以上10個開源項目我都已經整理好了

源碼獲取方式：關注+轉發後，私信【928】即可免費獲取

② 如何利用iview的Table組件實現將表格的列合並

本篇文章給大家帶來的內容是關於如何利用iview的Table組件實現將表格的列合並，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
iview的Table組件表頭分組iview的Table組件表頭分組
需求說明合並表頭
合並列，展示[合計]
最終呈現的效果
問題表頭有重復的key，數據如何匹配
實現合並列——需要修改Table組件來實現
1、合並表頭根據iview提供的demo可以看出，表頭的編輯是比較容易的，只需要根據格式編寫即可。
問題：表頭有重復的key，表頭和表數據如何匹配
解決：
需要分組的表頭 key_供貨人ID
需要分組的表數據 key_供貨人ID
[
{
"width":"200",
"align":"center",
"title":"物品名稱",
"ellipsis":true,
"key":"name",
},
{
"width":"100",
"align":"center",
"title":"數量",
"ellipsis":true,
"key":"purchaseAmount",
},
{
"width":"166",
"align":"center",
"title":"lyy369",
"ellipsis":true,
"key":"supplier_11113173785",
"children":[
{
"width":"100",
"align":"center",
"title":"單價(元)",
"ellipsis":true,
"key":"quoteUnitPrice_11113173785",
},
{
"width":"100",
"align":"center",
"title":"總計(元)",
"ellipsis":true,
"key":"quoteTotalPrice_11113173785",
}
]
},
{
"width":"166",
"align":"center",
"title":"私人定製",
"ellipsis":true,
"key":"supplier_11113173838",
"children":[
{
"width":"100",
"align":"center",
"title":"單價(元)",
"ellipsis":true,
"key":"quoteUnitPrice_11113173838",
},
{
"width":"100",
"align":"center",
"title":"總計(元)",
"ellipsis":true,
"key":"quoteTotalPrice_11113173838",
}
]
}
][
{
"name":"手動添加",
"purchaseAmount":"9887.00",
"quoteTotalPrice_11113173785":"494350.00",
"supplierId_11113173785":"11113173785",
"quoteAmount_11113173785":"9887.0000",
"quoteUnitPrice_11113173785":"50.0000",
"quoteTotalPrice_11113173838":"988700.00",
"supplierId_11113173838":"11113173838",
"quoteAmount_11113173838":"9887.0000",
"quoteUnitPrice_11113173838":"100.0000"
},
{
"name":"2018年7月9日",
"purchaseAmount":"1.00",
"quoteTotalPrice_11113173785":"50.00",
"supplierId_11113173785":"11113173785",
"quoteAmount_11113173785":"1.0000",
"quoteUnitPrice_11113173785":"50.0000",
"quoteTotalPrice_11113173838":"100.00",
"supplierId_11113173838":"11113173838",
"quoteAmount_11113173838":"1.0000",
"quoteUnitPrice_11113173838":"100.0000"
},
{
"name":" 中國移動取消流量「漫遊」費",
"purchaseAmount":"563.00",
"quoteTotalPrice_11113173785":"28150.00",
"supplierId_11113173785":"11113173785",
"quoteAmount_11113173785":"563.0000",
"quoteUnitPrice_11113173785":"50.0000"
},
{
"name":" 中國移動取消流量「漫遊」費",
"purchaseAmount":"23.00",
"quoteTotalPrice_11113173785":"1150.00",
"supplierId_11113173785":"11113173785",
"quoteAmount_11113173785":"23.0000",
"quoteUnitPrice_11113173785":"50.0000",
"quoteTotalPrice_11113173838":"2300.00",
"supplierId_11113173838":"11113173838",
"quoteAmount_11113173838":"23.0000",
"quoteUnitPrice_11113173838":"100.0000"
}
]2、實現[合計]的合並列展示此處需要更改iview的Table組件的源碼。
數據格式如下，控制行，控制列，控制合並個數，控制展示數據
[
{// 每一條，表示有一行
"total":"合計", // 展示的數據
"key":"total", // 表頭的key
"align":"center",
"ellipsis":true,
"colspan":"2", // 需要計算合並列的個數
"tableBody":[ // tableBody.length 表示有多少個值
{
"total_11113173785":"523700.00",
"key":"total_11113173785",
"colspan":"2",
"align":"center",
"ellipsis":true
},
{
"total_11113173838":"991100.00",

"key":"total_11113173838",
"colspan":"2",
"align":"center",
"ellipsis":true
}
]
}
]以下是修改的源碼，暫時不支持表格的滑鼠移入等事件
table-body.vue:33
<template v-if="(index+1)==data.length">
<template v-for="(colSpanColumn, colSpanColumnIndex) in colSpanColumns">
<table-tr
:row="colSpanColumn"
:key="colSpanColumn.key"
:prefix-cls="prefixCls"
>
<td :colspan="colSpanColumn.colspan" :class="alignCls(colSpanColumn, colSpanColumn.tableBody)">
<Cell
:natural-index="Number(colSpanColumnIndex+data.length)"
:index="Number(colSpanColumnIndex+data.length)"
:prefix-cls="prefixCls"
:row="colSpanColumn"
:key="colSpanColumn.key"
:column="colSpanColumn"
></Cell>
</td>
<template v-for="(colSpanBody, colSpanBodyIndex) in colSpanColumn.tableBody" :class="alignCls(colSpanColumn, colSpanBody)">
<td :colspan="colSpanBody.colspan" :class="alignCls(colSpanBody, colSpanBody)">
<Cell
:natural-index="Number(colSpanBodyIndex+data.length)"
:index="Number(colSpanBodyIndex+data.length)"
:prefix-cls="prefixCls"
:row="colSpanBody"
:key="colSpanBody.key"
:column="colSpanBody"
></Cell>
</td>
</template>
</table-tr>
</template>
</template>

③ vue+iview中使在table中用render渲染input表單及驗證(表單支持同時多行編輯)

關於表單單行的編輯操作iview文檔中已經提供有範例，以下是復雜點支持多行編輯的用法。

先看效果：

HTML部分：

這里 # 是v-slot的縮寫，#age="{row,index}"相當於v-slot:age="{row,index}"。
關於v-slot的相關知識點，請參考官方文檔：作用域插槽
這里有個重點，rule驗證規則比需要寫在FormItem標簽中，寫在Form標簽中是無效的！

VUE部分：

上面範例中我沒有寫驗證結果的處理部分，處理效驗結果跟普通form的用法一樣：

只要將上面這一部分在類似『on-change』『on-blur』的觸發事件中進行效驗處理即可

CSS部分(覆蓋iview源碼中form表單樣式)：

導航:首頁 > 源碼編譯 > 用iView開發的源碼

用iView開發的源碼

與用iView開發的源碼相關的資料