效果：
功能：首先進(jìn)來是全部清空的狀態(tài)的
-
點(diǎn)擊左邊選擇不同項右邊會實時發(fā)送接口獲取數(shù)據(jù)填充表格
-
復(fù)選的內(nèi)容可以保留顯示，比如A的1勾選后切換到B再切換回來A的1仍然是勾選狀態(tài)
說實話官網(wǎng)的setCheckboxRow方法我實現(xiàn)不了，這里就是純蠢蠢的辦法實現(xiàn)，在這里做個記錄，能用咱就用著，有更好的辦法就下次一定
適用el-tabs來實現(xiàn)該樣式,關(guān)鍵點(diǎn)是
:checkbox-config="{ checkField: 'checked', checkRowKey: 'checked' }"這個配置 ，vxe-table表格會根據(jù)checked的狀態(tài)來判斷是否給勾選狀態(tài)（我加了checkField這個后會默認(rèn)給每個行添加字段checked，如果表格的數(shù)據(jù)沒有這一項只需要在獲取第一個表格數(shù)據(jù)的時候手動添加checked這個屬性，例如后面我在init函數(shù)中加的）文章來源：http://www.zghlxwxcb.cn/news/detail-798372.html
<el-tabs tab-position="left" @tab-click="handleClick">
<el-tab-pane v-for="(item, index) in tabs" :key="item.testItemCode" :label="item.testGroupName">
<vxe-table :ref="'table' + index" :data="testItemData" auto-resize align="center" :checkbox-config="{ trigger: 'row', checkField: 'checked', checkRowKey: 'checked' }" @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
<vxe-table-column type="checkbox" width="50">
<vxe-table-column type="checkbox" width="50"></vxe-table-column>
<vxe-table-column type="seq" title="序號" width="50"></vxe-table-column>
<vxe-table-column field="testItemName" title="測試項"></vxe-table-column>
<vxe-table-column field="testItemCode" title="測試項編碼"></vxe-table-column>
<vxe-table-column field="testTypeName" title="測試類型"></vxe-table-column>
</vxe-table>
</el-tab-pane>
</el-tabs>
- 在Init初始化的時候就都給一個默認(rèn)的屬性
checked = false，每次點(diǎn)擊勾選的時候就把它存起來，取消勾選就把這一項刪除，這里用curSelectedList來存儲選中項的- 在
tab-click點(diǎn)擊事件中也就是切換tab時發(fā)送不同的請求獲取表格數(shù)據(jù)，如果該數(shù)據(jù)在curSelectedList中的話我們就把他的``checked屬性設(shè)置為true`，就實現(xiàn)了選中的狀態(tài)- 最后確認(rèn)的時候就把
curSelectedList的數(shù)據(jù)傳出去就好了，也就是選中的項
// 頁面剛進(jìn)來的時候就獲取第一組數(shù)據(jù)
init() {
this.tabs = this.testGroupNameList
this.getTestItemData(this.tabs[0].testGroupCode)
},
// 獲取測試項
async getTestItemData(testGroupCode) {
this.testItemData = await getItemCodesOfGroup({
testNo: this.testNo,
testGroupCode,
entityCode: this.entityCode
})
//??上面的就是獲取數(shù)據(jù)，這里比較關(guān)鍵，不寫的話進(jìn)來第一次就會勾選不了
this.testItemData.forEach(i => i.checked = false)
},
async handleClick(tab) {
// 先通過左邊的選擇獲取相應(yīng)的表格數(shù)據(jù)，這里也是獲取數(shù)據(jù)
await this.getTestItemData(this.tabs.find(v => v.testGroupName == tab.label).testGroupCode)
//?? 這里比較關(guān)鍵，如果在已選擇的列表內(nèi)，就設(shè)置為選中狀態(tài)
if (this.curSelectedList.length) {
this.testItemData.forEach(item => {
this.curSelectedList.forEach(item2 => {
if (item.testItemName == item2.testItemName) {
item.checked = true
}
})
})
}
},
// 復(fù)選框事件
selectChangeEvent(selection) {
// 選中時保存選中項
if (selection.checked) {
this.curSelectedList.push(selection.row)
this.curSelectedList = this.unique(this.curSelectedList, 'testItemName')
} else {
// 取消時刪除選中項
this.curSelectedList = this.curSelectedList.filter(item => item.testItemName != selection.row.testItemName)
}
},
// vxe復(fù)選框當(dāng)前頁全選中方法
selectAllEvent(selection) {
// 選中時保存選中項
if (selection.checked) {
this.curSelectedList.push(...selection.records)
this.curSelectedList = this.unique(this.curSelectedList, 'testItemName')
} else {
// 取消時刪除選中項
selection.$table.tableData.forEach(item => {
this.curSelectedList = this.curSelectedList.filter(item2 => item2.testItemName != item.testItemName)
})
}
},
// 通過testItemName去重函數(shù) ,testItemCode不是唯一的
unique(arr, attr) {
const map = new Map()
const result = []
for (const item of arr) {
if (!map.has(item[attr])) {
map.set(item[attr], true)
result.push(item)
}
}
return result
},
// 確認(rèn)選擇測試項，這里就是把當(dāng)前選中項傳給父組件的
doChoose() {
this.curSelectedList = this.unique(this.curSelectedList, 'testItemName')
this.$emit('getTestItemList', this.curSelectedList)
this.closeDialog()
},
肯定有更簡單的方法，也有更加簡潔的方法，我這個就比較冗余然后就是為了實現(xiàn)功能，大家僅供參考文章來源地址http://www.zghlxwxcb.cn/news/detail-798372.html
到了這里，關(guān)于使用ElementUI的el-tab+vxe-table表格+復(fù)選框選擇的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
