记录vue开发实例

封装的表格组件

 引入使用

 

 element组件fixed="right" 表格错位

 解决方法

1，

2，

3，

 通过数组数量循环input标签数量填写表单

paramsInfo.fieldList的值

targetDataList的值

 表单循环targetDataList获取 label值（即有多少个input标签的生成），表单填写的内容绑定在 paramsInfo.fieldList[index].fieldValue

 根据表头获取输入框数量

 根据表头的数量，新增的输入框数量

    //增加按钮
    addBtn() {
      // 检查 scopeBranchLists 不为空且包含 fieldName 属性
      if (Array.isArray(this.scopeBranchLists) && this.scopeBranchLists.length > 0) {
        // 使用 map 函数从 scopeBranchLists 中提取 fieldName 值
        //fieldNames = ['index_name', 'dept_name', 'comment', 'dept_type', 'options', 'unit', 'source_priority']
        // let fieldNames = this.scopeBranchLists.reduce((acc, item) => {
        //   acc[item.fieldName] = '';
        //   return acc;
        // }, {});
        const fieldNames = this.scopeBranchLists.map(item => item.fieldName);
        var fieldNamesObj = {};
        for (var i = 0; i < fieldNames.length; i++) {
          fieldNamesObj[fieldNames[i]] = null;
        }
        //this.formData = fieldNamesObj
        this.rows.push(fieldNamesObj);

      }
    },

 表头数据 

  {{ item.fieldDesc }}

 生成的input框数量（5个表头，生成对应五个输入框 为一个对象，最后放入rows数组）

完整代码

          

            

              

                {{ item.fieldDesc }}