Vue controls whether the table content is editable according to the header field returned by the background.

1. Header information is returned in the background. Each column header information has a field that can be edited
2. There is an edit button, click the button, will be judged according to the header information, otherwise it is not editable status
3. The data in the body part of the table is also generated according to the background data loop
4. At present, I can only bind this field to the disabled attribute when rendering. I can"t click to edit to recognize the editing status of the field
disabled attribute in html,el-input-number

<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>

the header data format is returned at the backend, and whether the edit field can be written

{
        "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
      },

Vue.js

Feb.27,2021

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;