vue 根据后台返回的表头字段控制表格内容是否可编辑

1.后台会返回表头信息,每一列表头信息有个字段是是否可编辑
2.有一个编辑按钮,点击按钮,才会根据表头信息进行判断,否则都是不可编辑状态
3.表格body部分的数据也是根据后台数据循环生成
4.目前我只能做到在渲染的时候把该字段绑定给disabled属性,做不到点击编辑才识别字段的编辑状态
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>

后台返回表头数据格式,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
      },

图片描述

阅读 3.5k
1 个回答

这种问题。。。

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;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题