1.在 searchBox 搜索欄中，用到了多級下拉框的篩選條件，樣式如下：

?這樣看起來是沒什么問題的，但當(dāng)我選擇時，在框中顯示的內(nèi)容和篩選條件的內(nèi)容就出錯了：

這里其實是選擇了 采礦業(yè) -- 石油和天然氣開采業(yè) ，但顯示框中是 林業(yè)，篩選條件的內(nèi)容也有問題：

這里沒有顯示最后一級的 選項，即??石油和天然氣開采業(yè)。

問題就在這里，value 值的設(shè)置：?

修改的mock數(shù)據(jù)如下，這樣就可以正常顯示了：

內(nèi)容效果：?

?

這里貼一部分代碼：?

industryTypeList: [
    { value: 101, label: '農(nóng)、林、牧、漁業(yè)',
      children: [
        { value: 10101, label: '農(nóng)業(yè)' },
        { value: 10102, label: '林業(yè)' },
        { value: 10103, label: '畜牧業(yè)' },
        { value: 10104, label: '漁業(yè)' },
        { value: 10105, label: '農(nóng)、林、牧、漁服務(wù)業(yè)' }
      ]
    },
    { value: 102, label: '采礦業(yè)',
      children: [
        { value: 10201, label: '煤炭開采和洗選業(yè)' },
        { value: 10202, label: '石油和天然氣開采業(yè)' },
        { value: 10203, label: '黑色金屬礦采選業(yè)' },
        { value: 10204, label: '有色金屬礦采選業(yè)' },
        { value: 10205, label: '非金屬礦采選業(yè)' },
        { value: 10206, label: '開采輔助活動' },
        { value: 10207, label: '其他采礦業(yè)' }
      ]
    },
    { value: 103, label: '制造業(yè)',
      children: [
        { value: 10301, label: '農(nóng)副食品加工業(yè)' },
        { value: 10302, label: '食品制造業(yè)' },
        { value: 10303, label: '酒、飲料和精制茶制造業(yè)' },
        { value: 10304, label: '煙草制品業(yè)' },
        { value: 10305, label: '紡織業(yè)' },
        { value: 10306, label: '紡織服裝、服飾業(yè)' },
        { value: 10307, label: '皮革、毛皮、羽毛及其制品和制鞋業(yè)' },
        { value: 10308, label: '木材加工和木、竹、藤、棕、草制品業(yè)' },
        { value: 10309, label: '家具制造業(yè)' },
        { value: 10310, label: '造紙和紙制品業(yè)' },
        { value: 10311, label: '印刷和記錄媒介復(fù)制業(yè)' },
        { value: 10312, label: '文教、工美、體育和娛樂用品制造業(yè)' },
        { value: 10313, label: '石油加工、煉焦和核燃料加工業(yè)' },
        { value: 10314, label: '化學(xué)原料和化學(xué)制品制造業(yè)' },
        { value: 10315, label: '醫(yī)藥制造業(yè)' },
        { value: 10316, label: '化學(xué)纖維制造業(yè)' },
        { value: 10317, label: '橡膠和塑料制品業(yè)' },
        { value: 10318, label: '非金屬礦物制品業(yè)' },
        { value: 10319, label: '黑色金屬冶煉和壓延加工業(yè)' },
        { value: 10320, label: '有色金屬冶煉和壓延加工業(yè)' },
        { value: 10321, label: '金屬制品業(yè)' },
        { value: 10322, label: '通用設(shè)備制造業(yè)' },
        { value: 10323, label: '專用設(shè)備制造業(yè)' },
        { value: 10324, label: '汽車制造業(yè)' },
        { value: 10325, label: '鐵路、船舶、航空航天和其他運輸設(shè)備制造業(yè)' },
        { value: 10326, label: '電氣機械和器材制造業(yè)' },
        { value: 10327, label: '計算機、通信和其他電子設(shè)備制造業(yè)' },
        { value: 10328, label: '儀器儀表制造業(yè)' },
        { value: 10329, label: '其他制造業(yè)' },
        { value: 10330, label: '廢棄資源綜合利用業(yè)' },
        { value: 10331, label: '金屬制品、機械和設(shè)備修理業(yè)' }
      ]
    },
    { value: 104, label: '電力、熱力、燃氣及水生產(chǎn)和供應(yīng)業(yè)' },
    { value: 105, label: '建筑業(yè)' },
    { value: 106, label: '批發(fā)和零售業(yè)' },
    { value: 107, label: '交通運輸、倉儲和郵政業(yè)' },
    { value: 108, label: '住宿和餐飲業(yè)' },
    { value: 109, label: '信息傳輸、軟件和信息技術(shù)服務(wù)業(yè)' },
    { value: 110, label: '金融業(yè)' },
    { value: 111, label: '房地產(chǎn)業(yè)' },
    { value: 112, label: '租賃和商務(wù)服務(wù)業(yè)' },
    { value: 113, label: '科學(xué)研究和技術(shù)服務(wù)業(yè)' },
    { value: 114, label: '水利、環(huán)境和公共設(shè)施管理業(yè)' },
    { value: 115, label: '居民服務(wù)、修理和其他服務(wù)業(yè)' },
    { value: 116, label: '教育' },
    { value: 117, label: '衛(wèi)生和社會工作' },
    { value: 118, label: '文化、體育和娛樂業(yè)' },
    { value: 119, label: '公共管理、社會保障和社會組織' },
    { value: 120, label: '國際組織' },
    { value: 121, label: '其他' }
]

?2.在制作表單頁面時，用到了 單選按鈕，需要設(shè)置?trigger 屬性，先看看效果：

選擇性別，并且是必選項，現(xiàn)在的代碼是，因為調(diào)用 elementui組件庫時，默認是綁定了 radio 值，但就在這個地方出現(xiàn)了問題：

trigger 屬性在這里設(shè)置為 blur 或 change 均可，選擇之后，不會提示未選擇選項的錯誤信息，但點擊提交表單時，會出現(xiàn)錯誤提示框，效果是這樣：

選擇了“女”，依然提示“請選擇性別”，解決如下：

扔掉 radio 項，設(shè)置為當(dāng)前綁定的數(shù)據(jù)項：s012，即可解決

<el-col :span="12">
     <el-form-item label="性別" prop="s012" ref="radioGroup">
          <el-radio v-model="formData.s012" label="1">男</el-radio>
          <el-radio v-model="formData.s012" label="2">女</el-radio>
     </el-form-item>
</el-col>

s012: [{
   required: true,
   message: '請選擇性別',
   trigger: 'change'
}]

3.在做?el-table 組件時，每列數(shù)據(jù)的寬度不同，并且用戶使用的電腦屏幕大小不同，為了兼容并且提高用戶體驗，可以設(shè)置 mid-width 屬性以及?show-overflow-tooltip（默認一行展示，超過顯示省略號）。如果希望用戶能夠查看完整的內(nèi)容，可以添加一個 ToolTip 組件在鼠標(biāo) hover 該單元格時浮現(xiàn)出來以顯示全部內(nèi)容。

<el-table-column prop="s003" :label="columnControl[2].label" mid-width="120" show-overflow-tooltip>
    <template slot-scope="scope">
        {{ scope.row.s003 }}
    </template>
</el-table-column>

4.組件間通訊，這里是我用到的父子組件間的通訊

在父子組件通信方面，可以采用以下幾種常用的方法：

1. Props 傳遞：父組件通過 props 將數(shù)據(jù)傳遞給子組件。子組件通過 props 接收并使用這些數(shù)據(jù)。父組件可以在需要的時候更新傳遞給子組件的 props 數(shù)據(jù)，從而實現(xiàn)通信和數(shù)據(jù)更新。

2. 自定義事件：父組件可以通過自定義事件的方式向子組件發(fā)送消息或觸發(fā)特定操作。子組件可以監(jiān)聽這些事件，并在事件被觸發(fā)時執(zhí)行相應(yīng)的操作。

3. 使用 ref：父組件可以通過 ref 引用子組件的實例，從而直接訪問子組件的屬性和方法。這樣可以實現(xiàn)父組件調(diào)用子組件的特定方法，或讀取子組件的狀態(tài)。

4. 使用 Vuex（Vue.js 的狀態(tài)管理庫）：如果你在 Vue.js 中使用 Vuex，則可以在父組件和子組件之間共享全局狀態(tài)。父組件可以使用 Vuex 存儲和更新數(shù)據(jù)，子組件可以通過讀取 Vuex 中的狀態(tài)來獲取最新的數(shù)據(jù)。

我個人認為較為簡單是在父組件中定義要傳的值，然后用props在子組件中組件，之后通過 this.$emit('xxxx', yyyy)?的方式，下面是代碼示范：

這是我在父組件中用到的子組件 ShowApply，這里記得使用前引用文件

<ShowApply :visible.sync="showApplyDialogShow" />

這里的 :visible.sync 就是我要傳的值，用來控制子組件是否顯示

props: {
  visible: Boolean
}

在子組件中利用 props 進行注冊，然后在你綁定的點擊事件或其他自定義事件的方法中使用如下代碼中的 this.$emit('update:visible', false) ：【里面具體要綁定的事件可以自行修改】，這是父向子傳數(shù)據(jù)

methods: {
    // 提交申請
    onSubmit() {
      console.log('點擊提交申請')
      this.dialogShow = true
      // 觸發(fā)關(guān)閉事件，更新 visible 狀態(tài)
      this.$emit('update:visible', false)
    }
}

再舉一例，這里利用自定義事件或者 ref 都可以：

我要實現(xiàn)的需求是 我在子組件中上傳一些文件，形成一個文件列表，在父組件中可以渲染出來

即將紅色框中的列表渲染到觸發(fā)這個子組件的父組件中，即這樣的效果：

?在父組件中渲染子組件時，綁定ref 或者 自定義事件

<UploadDocument ref="uploadNew" @file-uploaded="handleFileUploaded" />

在子組件中使用 ref 或者 自定義事件，將我的文件列表渲染過去給父組件，這是子向父傳數(shù)據(jù)文章來源地址http://www.zghlxwxcb.cn/news/detail-499238.html

// 傳遞數(shù)據(jù)
toEmitFile() {
  // 將附件列表傳遞給父組件
  this.$emit('file-uploaded', this.attachmentList)
  this.attachmentList = []
}

到了這里，關(guān)于前端開發(fā)中遇到的小bug--解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！