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

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

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

:data="tableData"中傳入的tableData用來控制表格行數(shù)
el-table-column用來控制列數(shù)，有幾個(gè)el-table-column, 表格就有幾列
因此我們?cè)俣x一個(gè)數(shù)組，去對(duì)應(yīng)tableData中的要顯示的項(xiàng)，用來產(chǎn)生需要的列

comTable代碼如下：

//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">
? ? ? ? ? ? ? ? ? //點(diǎn)擊編輯時(shí)顯示這個(gè)
? ? ? ? ? ? ? ? ? ? <template v-if="scope.row.isEdit">
? ? ? ? ? ? ? ? ? ? ? ?? ?//可編輯顯示這個(gè)
? ? ? ? ? ? ? ? ? ? ? ? <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]">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- 模板中訪問不到實(shí)例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>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?//如果不可編輯依舊顯示這個(gè)
? ? ? ? ? ? ? ? ? ? ? ? <span v-if="!item.editAble">{{scope.row[item.prop]}}</span>
? ? ? ? ? ? ? ? ? ? </template>
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?//默認(rèn)狀態(tài)下是這個(gè)，因?yàn)閕sEdit在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綁定的值，需要幾個(gè)就傳幾個(gè)
        selectOptions:{
            type:Array,
            default(){
                return []
            }
        },
        colData:{
            type:Array,
            require:ttrue
            default(){
                return []
            }
        }
    },

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

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

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

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

表格可編輯

<template v-slot:header="{ click, btn_edit }">
? ? ? ? ? ? ? ? <div class="table_title_container">
? ? ? ? ? ? ? ? ? ? <h3>歷史技術(shù)狀況評(píng)定</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中的每一項(xiàng)添加 'isEdit'屬性為true
按鈕為完成：設(shè)置data中的每一項(xiàng) 'isEdit'屬性為null

select綁定相關(guān)

一般我們select都是會(huì) 對(duì)應(yīng)兩個(gè)字段

客戶端顯示的內(nèi)容
傳給服務(wù)端的內(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]">
                                <!-- 模板中訪問不到實(shí)例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中相關(guān)配置：

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

selectOptions:

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

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

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

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

您可能感興趣的文章: