1.彈框表格結(jié)構(gòu)
?文章來源地址http://www.zghlxwxcb.cn/news/detail-460753.html
<a-modal
? ? ? ? ? ? ? v-if="visibleQuality"
? ? ? ? ? ? ? title="請選擇需要提高的能力素質(zhì)要求"
? ? ? ? ? ? ? :maskClosable="false"
? ? ? ? ? ? ? :visible="visibleQuality && switchStatus"
? ? ? ? ? ? ? @ok="handleOkQuality"
? ? ? ? ? ? ? @cancel="handleCancelQuality"
? ? ? ? ? ? ? cancelText="取消"
? ? ? ? ? ? ? okText="確定"
? ? ? ? ? ? ? width="600px"
? ? ? ? ? ? >
? ? ? ? ? ? ? <a-spin :spinning="quaLoading" tip="加載中...">
? ? ? ? ? ? ? ? <vxe-table
? ? ? ? ? ? ? ? ? ref="qualityTable"
? ? ? ? ? ? ? ? ? row-id="id"
? ? ? ? ? ? ? ? ? :row-config="{ keyField: 'id', isHover: true }"
? ? ? ? ? ? ? ? ? :data="rowsQuality"
? ? ? ? ? ? ? ? ? :checkbox-config="checkboxConfig"
? ? ? ? ? ? ? ? ? width="600px"
? ? ? ? ? ? ? ? ? @checkbox-change="checkboxChange"
? ? ? ? ? ? ? ? ? @checkbox-all="checkBoxAll"
? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? ? <vxe-column type="checkbox" width="60"></vxe-column>
? ? ? ? ? ? ? ? ? <vxe-column
? ? ? ? ? ? ? ? ? ? field="abilityContent"
? ? ? ? ? ? ? ? ? ? title="能力素質(zhì)要求"
? ? ? ? ? ? ? ? ? ? width="240"
? ? ? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? ? ? <template #header>
? ? ? ? ? ? ? ? ? ? ? <span><span style="color: #f5222d">* </span> 能力素質(zhì)要求</span>
? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? ? </vxe-column>
? ? ? ? ? ? ? ? ? <vxe-column
? ? ? ? ? ? ? ? ? ? field="explain"
? ? ? ? ? ? ? ? ? ? title="能力素質(zhì)要求說明"
? ? ? ? ? ? ? ? ? ? width="240"
? ? ? ? ? ? ? ? ? ></vxe-column>
? ? ? ? ? ? ? ? </vxe-table>
? ? ? ? ? ? ? </a-spin>
? ? ? ? ? ? </a-modal>
2. 數(shù)據(jù)?
data() {
? ?return {
? ? ? ?checkboxConfig: {}, // 默認(rèn)選中
? ? ?}
}
3. 實現(xiàn)方法，首先要異步處理，等待數(shù)據(jù)加載完畢，再去回顯
3.1 第一種方法：
ps:(重要提示)設(shè)置checkboxConfig默認(rèn)選中第一次有效，第二次無效,處理：請求數(shù)據(jù)點擊人員時候提前請求拿到數(shù)據(jù)，給能力素質(zhì)彈框加v-if重新創(chuàng)建
? ? ? ? let arr = []
? ? ? ? this.qualityRows.map(v => {
? ? ? ? ? arr.push(v.abilityCode)
? ? ? ? })
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.checkboxConfig = {
? ? ? ? ? ? checkRowKeys: arr
? ? ? ? ? }
? ? ? ? ? this.checkboxConfig.checkRowKeys = arr
? ? ? ? ? // this.$set(this.checkboxConfig, 'checkRowKeys', arr)
? ? ? ? })
3.2?第二種方法：
// 第二種方法過濾得到新數(shù)組arr
? ? ? ? let arr = []
? ? ? ? if (this.rowsQuality && this.qualityRows) {
? ? ? ? ? this.rowsQuality.map(v => {
? ? ? ? ? ? this.qualityRows.map(item => {
? ? ? ? ? ? ? if (item.abilityCode === v.id) {
? ? ? ? ? ? ? ? arr.push(v)
? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? })
? ? ? ? }
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.$refs.qualityTable.clearCheckboxRow()
? ? ? ? ? this.$refs.qualityTable.setCheckboxRow(arr, true)
? ? ? ? })
3.3? 異步處理和回顯完整方法：（try,catch 配合async，await 異步處理）
async addQuality () {
? ? ? this.visibleQuality = true
? ? ? this.rowsQuality = []
? ? ? // 放在點擊人員時候請求，這里注釋掉
? ? ? this.quaLoading = true
? ? ? try {
? ? ? ? let params = {
? ? ? ? ? userId: this.currentRow.userId
? ? ? ? }
? ? ? ? let w = await Api.getAbility(params)
? ? ? ? this.rowsQuality = w.data // 需要選擇的能力項彈框的表格數(shù)據(jù)
? ? ? ? this.quaLoading = false
? ? ? ? this.$nextTick(() => {
? ? ? ? ? if (this.rowsQuality.length === 0) {
? ? ? ? ? ? this.demandPersonRows[this.currentRowIndex].improveAbility = false
? ? ? ? ? }
? ? ? ? })
? ? ? } catch (err) {
? ? ? ? this.quaLoading = false
? ? ? }
? ? ? if (this.rowsQuality.length === 0) {
? ? ? ? this.$message.warning('未設(shè)置能力素質(zhì)信息請聯(lián)系管理員!')
? ? ? } else {
? ? ? ? // 設(shè)置checkboxConfig默認(rèn)選中第一次有效，第二次無效,處理：請求數(shù)據(jù)點擊人員時候提前請求拿到數(shù)據(jù)，給能力素質(zhì)彈框加v-if重新創(chuàng)建
? ? ? ? // let arr = []
? ? ? ? // this.qualityRows.map(v => {
? ? ? ? // ? arr.push(v.abilityCode)
? ? ? ? // })
? ? ? ? // this.$nextTick(() => {
? ? ? ? // ? this.checkboxConfig = {
? ? ? ? // ? ? checkRowKeys: arr
? ? ? ? // ? }
? ? ? ? // ? this.checkboxConfig.checkRowKeys = arr
? ? ? ? // ? // this.$set(this.checkboxConfig, 'checkRowKeys', arr)
? ? ? ? // })
? ? ? ? // rowsQuality:需要選擇的能力項彈框的表格數(shù)據(jù)(id)，qualityRows：第三個表格能力素質(zhì)項表格數(shù)據(jù)(abilityCode)
? ? ? ? // 第一種方法過濾 得到條件item.abilityCode === v.id 為true 的新數(shù)組arr
? ? ? ? // let arr = this.rowsQuality.filter(v => {
? ? ? ? // ? let flag = false
? ? ? ? // ? this.qualityRows.map(item => {
? ? ? ? // ? ? if (item.abilityCode === v.id) {
? ? ? ? // ? ? ? return (flag = true)
? ? ? ? // ? ? }
? ? ? ? // ? });
? ? ? ? // ? if (flag) {
? ? ? ? // ? ? return true;
? ? ? ? // ? }
? ? ? ? // })
? ? ? ? // 第二種方法過濾得到新數(shù)組arr
? ? ? ? let arr = []
? ? ? ? if (this.rowsQuality && this.qualityRows) {
? ? ? ? ? this.rowsQuality.map(v => {
? ? ? ? ? ? this.qualityRows.map(item => {
? ? ? ? ? ? ? if (item.abilityCode === v.id) {
? ? ? ? ? ? ? ? arr.push(v)
? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? })
? ? ? ? }
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.$refs.qualityTable.clearCheckboxRow()
? ? ? ? ? this.$refs.qualityTable.setCheckboxRow(arr, true)
? ? ? ? })
? ? ? }
? ? }
文章來源：http://www.zghlxwxcb.cn/news/detail-460753.html
?
到了這里，關(guān)于vxe-table 表格多選框回顯的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
