vue element实现动态表格（table）动态表头与表单内容展示

前言描述：
       接到这么一个需求，经分析后我认为需要对某数据做一个动态的展示，每一个分页中展示的数据应为对应分页接口返回的最大数词条数展示，比如当前页为 1，且在一页数据最多 10 条时，如果返回的数据中当前所有词条最多可以有 3 个，那么表头最多就是命名为词条 3；
       当分页进入到第 2 页，返回的数据中，发现最多的一组数据中词条数据达到了 6 个，那么当前表头应该展示词条 6；
       以此类推，每次接口请求后的表头都是动态展示的，下图为动态表头图片展示。

1、template 标签区域代码示例:

2、script 标签区域代码示例:

export default {data() {
      return{
            tableMaxHeight: 'auto',
            tableData: [], // 表单数据
            maxLength: 0, // 用于保存动态表头最大数组长度
            // 静态列表展示表头
            staticTableColumnList:[ 
            {
               prop: 'search_keyword',
               label: 'card 对应搜索关键词',
               min_width: '200'
            },
            {
               prop: 'business_name',
               label: '业务名称',
               min_width: '200'
            },
            {
               prop: 'business_summary',
               label: '业务摘要',
               min_width: '200'
            },
            {
               prop: 'business_wiki_url',
               label: '业务百科',
               min_width: '200'
        }
      ],
           syncTableColumnList: [],// 接口动态表头

           // 最终使用表头（动静结合）默认是无数据的时候展示的表头名字，我是设置的这个，也可以吧静态表头设置成这个，看自己的业务要求
           tableColumnList: [
            {
               prop: 'loadingText',
               label: 'XXX 配置表单',
               width: '',
               align: 'center'
        }
      ],
      
      }
  },

  methods:{
           // 获取当前百科 card 表单数据
           async getTableList() {
           // 每次接口请求时均需重置最多条数数据
           this.maxLength = 0
           try {const { message, code, data, total} = await post('/api_pc/AI/search_cards', {data: this.query})
        if (code == '000000' && data) {if (Array.isArray(data) && data.length == 0) {this.tableData = []
            return false
          }
             // 动态处理表头, 遍历需要看一下最长的词条（词条对应知识的长度是多少，我们要保存最大值，创建对应的动态表头）data.forEach(item => {const { config_list, ...rest} = {...item}
            if (Array.isArray(config_list)) {
              const length = config_list.length
              if (length> this.maxLength) {this.maxLength = length}
            }
          })
         
           if (this.maxLength) {
            // 每次接口请求时均需重置动态表头数据
            this.syncTableColumnList = []
            for (let i = 1; i  {let newObj = JSON.parse(JSON.stringify(item))
            if (Array.isArray(item.config_list) && item.config_list.length > 0) {item.config_list.forEach((config, index) => {newObj[`name${index + 1}`] = config.name
                newObj[`path${index + 1}`] = config.path
              })
            }
            return newObj
          })
           this.total = total || 0

          this.$nextTick(() => {scrollTop(document.querySelector('.card_entry_table'))
          })
        } else {throw message}
         } catch (err) {this.$message.error(`${err}`)
      }
    },
  }

补充：
      这里可以发现表头是动态的，表单数据返回的词条和词条对应知识字段也是数量不固定的，那么根据表格常见的 crud, 必然是有前端操作新增的，且新增是动态的，可以设置最大限制新增数量，可以新增就可以删除新增，下方是我在处理新增（编辑）表单时对于词条相关的处理。

3、动态新增词条 N（词条对应知识 N）代码示例：
 

 // 增减操作 configList 描述数组 @click="actionMsgItems('add 或者 delete', item.id)"
由于后端没有存 id 字段，删除时需要 id 标识，在初始化的时候可以把索引当做 id，编辑或者新增时可选时间戳作为唯一标识
    actionMsgItems(key, id) {switch (key) {
        case 'add':
          let index = this.encyclopediaCardForm.config_list.findIndex(item => item.id === id)
          if (index != -1) {
            this.encyclopediaCardForm.config_list.splice(index + 1, 0, {
              name: '',// 这个字段就是词条
              path: '',// 这个字段就是词条对应知识
              id: Date.now()})
             } else {this.$message.error('ID 查询失败，无法添加！')
          }
          break
        case 'delete':
             this.encyclopediaCardForm.config_list = 
             this.encyclopediaCardForm.config_list.filter(item => item.id != id
          )
          break
        default:
          break
      }
    },