vue2.x?el-table二次封裝實現(xiàn)編輯修改

更新時間：2022年03月24日 15:50:00 作者：小鐵匠在門外

本文主要介紹了vue2.x?el-table二次封裝實現(xiàn)編輯修改，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

//data是從后端獲取到的數(shù)據(jù)，控制行數(shù)
<el-table :data="data" class="com_table" :border="true" style="wdith:100%">?
? ?? ??? ??? ??? ??? ?//colData是我們要傳入組件的數(shù)據(jù)，控制列數(shù)
? ? ? ? ? ? <el-table-column
? ? ? ? ? ? ? ? v-for="(item,index) of colData"
? ? ? ? ? ? ? ? :key="index"
? ? ? ? ? ? ? ? :prop="item.prop"
? ? ? ? ? ? ? ? :label="item.label"
? ? ? ? ? ? ? ? :width="item.width || 'auto'"
? ? ? ? ? ? >
? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? //點擊編輯時顯示這個
? ? ? ? ? ? ? ? ? ? <template v-if="scope.row.isEdit">
? ? ? ? ? ? ? ? ? ? ? ?? ?//可編輯顯示這個
? ? ? ? ? ? ? ? ? ? ? ? <template v-if="item.editAble">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-select @change="changeSelect(scope.row,scope.row[item.prop],item.selectValue)" v-if="item.isSelect" v-model="scope.row[item.prop]">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- 模板中訪問不到實例this，因此在computed中使用_this返回 -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-option
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-for="item_ of _this[item.options]"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :key="item_.key"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :label="item_[item.value]"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :value="item_[item.value]" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? > ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </el-option>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </el-select>n>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </el-select>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-input v-else v-model="scope.row[item.prop]"></el-input>
? ? ? ? ? ? ? ? ? ? ? ? </template>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?//如果不可編輯依舊顯示這個
? ? ? ? ? ? ? ? ? ? ? ? <span v-if="!item.editAble">{{scope.row[item.prop]}}</span>
? ? ? ? ? ? ? ? ? ? </template>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?//默認狀態(tài)下是這個，因為isEdit在scope.row里并沒有，為undefined
? ? ? ? ? ? ? ? ? ? <span v-if="!scope.row.isEdit">{{scope.row[item.prop]}}</span>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? </el-table-column>
? ? ? ? </el-table>

computed中

 computed:{
? ? ? ? _this(){
? ? ? ? ? ? return this
? ? ? ? }
? ? },

?

接收以下參數(shù)

props:{
        data:{
            type:Array,
            require:true,
            default(){
                return []
            }
        },
        //select綁定的值，需要幾個就傳幾個
        selectOptions:{
            type:Array,
            default(){
                return []
            }
        },
        colData:{
            type:Array,
            require:ttrue
            default(){
                return []
            }
        }
    },

colData 控制列數(shù)的數(shù)組

export const colData = [
    {
        prop:'indexNum',
        label:'序號',
        width:'120px',
    },
    {
        prop:'roadName',
        label:'路段名稱'
    },
    {
        prop:'tunnelName',
        label:'隧道名稱'
    },
    {
        prop:'tunnelLength',
        label:'隧道長度(m)'
    },
    {
        prop:'completeYear',
        label:'建成時間'
    },
    {
        prop:'evaluateYear',
        label:'評定年份'
    },
    {
        prop:'evaluateScore',
        label:'評定評分'
    },
    {
        prop:'evaluateLevelName',
        label:'機電評定等級',
        editAble:true, //editAble為true代表可編輯，沒有這個值的項 為undefined，即不可編輯
        isSelect:true,   //表示編輯方式為select, 沒有就是輸入框
        selectValue:'evaluateLevel'   //編輯是綁定的值
        options:'selectOptions',    //遍歷產(chǎn)生的option對應的選項
        value:'value'   //綁定options中對應的鍵
    },
    {
        prop:'powerRate',
        label:'供配電設施完好率(%)',
        editAble:true   
    },
    {
        prop:'lightRate',
        label:'照明設施完好率(%)',
        editAble:true
    },
    {
        prop:'ventilateRate',
        label:'通風設施完好率(%)',
        editAble:true
    },
    {
        prop:'fireControlRate',
        label:'消防設施完好率(%)',
        editAble:true
    },
    {
        prop:'monitorRate',
        label:'監(jiān)控與通訊設施完好率(%)',
        editAble:true
    }
]

后端返回的數(shù)據(jù)是這樣的：

當然，這些都是測試用的假數(shù)據(jù)，切記不要泄露公司數(shù)據(jù)哦

表格可編輯

<template v-slot:header="{ click, btn_edit }">
? ? ? ? ? ? ? ? <div class="table_title_container">
? ? ? ? ? ? ? ? ? ? <h3>歷史技術狀況評定</h3>
? ? ? ? ? ? ? ? ? ? <el-button v-if="btn_edit" class="table_title_btn el-icon-edit" size="small" @click="click">修改</el-button>
? ? ? ? ? ? ? ? ? ? <el-button v-else class="table_title_btn el-icon-check" type="primary" size="small" plain @click="click">完成</el-button>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </template>

if(this.btn_edit){
                            this.data.forEach(item => {
                                this.$set(item, 'isEdit', true)
                            })
                    }else{
                            this.data.forEach(item => {
                                this.$set(item, 'isEdit', null)
                            })
                    }
                    this.btn_edit = !this.btn_edit

按鈕為編輯：給data中的每一項添加 'isEdit'屬性為true
按鈕為完成：設置data中的每一項 'isEdit'屬性為null

select綁定相關

一般我們select都是會對應兩個字段

客戶端顯示的內(nèi)容
傳給服務端的內(nèi)容

//在comTable中是這樣寫的
<el-select @change="changeSelect(scope.row,scope.row[item.prop],item.selectValue)" v-if="item.isSelect" v-model="scope.row[item.prop]">
                                <!-- 模板中訪問不到實例this，因此在computed中使用_this返回 -->
                                <el-option
                                    v-for="item_ of _this[item.options]"
                                    :key="item_.key"
                                    :label="item_[item.value]"
                                    :value="item_[item.value]"                                   
                                >     
                                </el-option>
                            </el-select>

colData中相關配置：

 {
        prop:'evaluateLevelName',
        label:'機電評定等級',
        editAble:true,
        isSelect:true,    //編輯時類型為 select
        selectValue:'evaluateLevel',   //編輯時綁定的值
        options:'selectOptions',   //遍歷產(chǎn)生的option對應的選項
        value:'value'     //綁定options中對應的鍵
    },

selectOptions:

[
  {
    key:1,
    value:'一類'
  },
  {
    key:2,
    value:'二類'
  },
  {
    key:3,
    value:'三類'
  }
]

select的change事件處理函數(shù)

//傳入三個參數(shù)，分別是：
    // 當前這一行的scope.row
    //當前這一行特定屬性對應的值
    //要傳給服務端的 scope.row中對應的字段名
changeSelect(obj, value, key){
            let val = this.selectOptions.find(item => item.value == value).key
            this.$set(obj, key, val)
        },

到此這篇關于vue2.x el-table二次封裝實現(xiàn)編輯修改的文章就介紹到這了,更多相關vue2.x el-table 編輯修改內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

如何在在Vue3中使用markdown 編輯器組件
vue3發(fā)布正式版不久，生態(tài)還沒完全發(fā)展起來，目前支持vue3的開源markdown編輯器組件基本上也寥寥無幾，向大家推薦一個很好用的v-md-editor 組件，組件功能很強大，文檔也比較詳細。該文章只介紹組件的常用功能，更多高級的功能可以參考官方文檔。
2021-05-05
Vue.JS項目中5個經(jīng)典Vuex插件
在本文中，將向你展示5個特性，你可以通過 Vuex 插件輕松地添加到下一個項目中。一起來學習下。
2017-11-11
Vue中如何合并el-table第一列相同數(shù)據(jù)
這篇文章主要介紹了Vue中如何合并el-table第一列相同數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue3的watch和watchEffect你了解嗎
這篇文章主要為大家詳細介紹了vue的watch和watchEffect，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
詳解一次Vue低版本安卓白屏問題的解決過程
這篇文章主要介紹了詳解一次Vue低版本安卓白屏問題的解決過程,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
vue中slot（插槽）的介紹與使用
這篇文章主要給大家介紹了關于vue中slot（插槽）的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-11-11
詳解win7 cmd執(zhí)行vue不是內(nèi)部命令的解決方法
這篇文章主要介紹了詳解win7 cmd執(zhí)行vue不是內(nèi)部命令的解決方法的相關資料,這里提供了解決問題的詳細步驟，具有一定的參考價值，需要的朋友可以參考下
2017-07-07
Vue2中實現(xiàn)dialog的封裝方式
這篇文章主要介紹了Vue2中實現(xiàn)dialog的封裝方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
Vue實現(xiàn)動態(tài)顯示表單項填寫進度功能
這篇文章主要介紹了Vue實現(xiàn)動態(tài)顯示表單項填寫進度功能，此功能可以幫助用戶了解表單填寫的進度和當前狀態(tài)，提高用戶體驗，通常實現(xiàn)的方式是在表單中添加進度條，根據(jù)用戶填寫狀態(tài)動態(tài)更新進度條，感興趣的同學可以參考下文
2023-05-05
vue中使用mockjs配置和使用方式
這篇文章主要介紹了vue中使用mockjs配置和使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04