vue element UI 表格嵌套下拉框

在開發過程中，總有一些不得已的需求要實現，比如我遇到的，具體需求是：

　　1:展示表格數據，屬性以下拉框的形式展示

　　2:此屬性可直接進行編輯

　　3:可多選

如下圖所示：

 

那么到我們開發手里就需要分析怎么能夠實現這個效果，首先要把這個頁面先畫出來，具體代碼如下：

<el-table>
    <el-table-column label="屬性">
            <template slot-scope="scope">
              <el-select ref="fuck" multiple size="mini"  v-model='scope.row.type' >
                <el-option value="is_hot_tag" label="熱門標簽"></el-option>
                <el-option value="is_latest_track_tag" label="最新賽道"></el-option>
                <el-option value="is_new_subhangye_tag" label="新體系子行業"></el-option>
              </el-select>
            </template>
          </el-table-column>
</el-table>

這里的“multiple”屬性是使下拉框變為多選，el官方文檔有具體講解。現在效果出來了，開始寫方法。可以使用的方法有@change，@blur，@visible-change等

首先來看看哪個方法合適，

　　@change監聽的是文本框改變就會觸發，這就有一個弊端，每選擇一次就會觸發一次方法，所以不用。

　　@blur按理來說是最合適的，但是@blur在vue項目中很不穩定，頻繁操作會出現失效的情況。

所以我選擇了@visible-change，這是官網的說明：

 

 

  @visible-change函數里面傳遞兩個參數（第一個是回調參數，第二個是自己定義的參數）

那么我們把這個函數給標簽頁加上，代碼如下所示：

<el-table>
    <el-table-column label="屬性">
            <template slot-scope="scope">
              <el-select ref="fuck" multiple size="mini"  v-model='scope.row.type'  @visible-change="handleChangeType($event,scope); cancelChange($event,scope);"> 
　　　　　　　　　　<el-option value="is_hot_tag" label="熱門標簽"></el-option> 
　　　　　　　　　　<el-option value="is_latest_track_tag" label="最新賽道"></el-option> 
　　　　　　　　　　<el-option value="is_new_subhangye_tag" label="新體系子行業"></el-option> 
　　　　　　　　 </el-select> 
　　　　　　　　</template> 
　　　</el-table-column> 
</el-table>

現在寫方法，上代碼：

// callback是回調參數，scope是從表格傳過來的參數
handleChangeType (callback,scope) {
        let arr = []
        if (!callback) {   // 此處判斷下拉框只要隱藏就執行以下代碼
            arr = scope.row.type
            let is_latest_track_tag = 0    // 是否是最新賽道標簽 1是0否  可忽略
            let is_new_subhangye_tag = 0   // string 是 是否是 新行業體系子行業標簽 1是0否 可忽略
            let is_hot_tag = 0             // 是否是 熱門標簽 1是0否 可忽略
            is_latest_track_tag = arr.indexOf('is_latest_track_tag') < 0 ? 0 : 1  //可忽略
            is_new_subhangye_tag = arr.indexOf('is_new_subhangye_tag') < 0 ? 0 : 1  //可忽略
            is_hot_tag = arr.indexOf('is_hot_tag') < 0 ? 0 : 1  // 這幾行代碼是由於后端要的參數需要我前端進行處理，每次傳參這三個選項都是必須傳的，只是值不同；可忽略
            let params = {   //params為傳的參數
                unionid: this.unionid,
                tag: scope.row.tag,
                is_latest_track_tag,
                is_new_subhangye_tag,
                is_hot_tag
            }
            if (this.types === scope.row.type) {
              return
            }   //因為每次點開下拉框都會調用方法，所以此處加了個判斷，如果兩次的參數相同，則return，不執行下面的代碼
            let url = this.$api.updateTagType
            this.mask = true
            this.$post(url, params).then(res => {
                if (res) {
                    this.mask = false
                    this.$nextTick(_ => {
                        this.showTag().then(_ => {
                            this.$message.success('切換標簽屬性成功')
                        })
                    })
                }
            })
        }
    },
    cancelChange (callback,scope) {  //這個方法是為了拿到當前的參數值，為調方法之前做判斷用

        if (callback === true){    // 當下拉框顯示時，給types賦值，為什么沒有在同一個方法里面寫，是因為一旦點擊其它選項，當前的types就會被篡改，所以在下拉框出現時就賦值

          this.types = scope.row.type

        } else {

          return  //如果他是隱藏狀態，直接return出去，不執行代碼

        }

      },

完活，收工。