vue 根據(jù)后臺返回的表頭字段控制表格內(nèi)容是否可編輯

1.后臺會返回表頭信息，每一列表頭信息有個字段是是否可編輯
2.有一個編輯按鈕，點擊按鈕，才會根據(jù)表頭信息進(jìn)行判斷，否則都是不可編輯狀態(tài)
3.表格body部分的數(shù)據(jù)也是根據(jù)后臺數(shù)據(jù)循環(huán)生成
4.目前我只能做到在渲染的時候把該字段綁定給disabled屬性，做不到點擊編輯才識別字段的編輯狀態(tài)
html，el-input-number中的disabled屬性

<div class="dynamic-tb">
            <el-table :data="dynamicData" border style="width: 100%" align="center">
                <el-table-column 
                    v-for="(title,index) in dynamicTitle"
                    :fixed="index===0"
                    :align="index===0 ? 'left' : 'center'"
                    :key="index"
                    class=""
                    :label="title.name"
                    :prop="title.field"
                    min-width="100"
                >
                    <template slot-scope="scope">
                        <el-input-number class="month-pay" size="mini" :min="0" :max="999999999" :controls="iscontrols"
                    v-model="scope.row[title.field]" :disabled="(title.edit == '+w'? false: true)"></el-input-number>
                    </template>
                </el-table-column>
            </el-table>
        </div>

后臺返回表頭數(shù)據(jù)格式，edit字段是是否可寫

{
        "field": "month_1",
        "align": "center",
        "name": "-月",
        "width": 0,
        "edit": "+r",
        "exec": null,
        "regExps": "{type:'number(2)',max:'999999999',min:0}",
        "titleUserd": null,
        "tig": null,
        "children": null
      },
      {
        "field": "month_2",
        "align": "center",
        "name": "二月",
        "width": 0,
        "edit": "+r",
        "exec": null,
        "regExps": "{type:'number(2)',max:'999999999',min:0}",
        "titleUserd": null,
        "tig": null,
        "children": null
      },

圖片描述

回答

編輯回答

心沉

這種問題。。。

let initData=[{
    "field": "month_1",
    "align": "center",
    "name": "-月",
    "width": 0,
    "edit": "+r",
    "exec": null,
    "regExps": "{type:'number(2)',max:'999999999',min:0}",
    "titleUserd": null,
    "tig": null,
    "children": null
  },
  {
    "field": "month_2",
    "align": "center",
    "name": "二月",
    "width": 0,
    "edit": "+r",
    "exec": null,
    "regExps": "{type:'number(2)',max:'999999999',min:0}",
    "titleUserd": null,
    "tig": null,
    "children": null
  },]
  let dataWithOutEdit=JSON.parse(initData).map((obj)=>{
      let {field,align,name,width,exec,regExps,titleUserd,tig,children}=obj
        return {field,align,name,width,exec,regExps,titleUserd,tig,children}
    })
沒點擊編輯的時候：data=dataWithOutEdit點擊編輯的時候:data=initData;

2018年7月25日 05:03