vue框架iview中Table动态表头可编辑内容的jsx写法

Posted 2023-04-27

参考技术A 有时候会出现以下需求，类似这样

其中不确定有几个分组，可能是A，B两个， 也可能是 A, B, C,D四个，因为是后台配置出来的（且分组下面的展示都一样：如这里的 A1,A2,A3,A4）
在分组数量不确定的时候，如是后台配增或减了分组之后，前端也要相对应的在页面进行修改。而且每新增一个组，对应组下面的A1,A2,A3,A4都得重新写一次，还要保证表格内容是可编辑的。这个时候表格需要动态处理表头信息。如果用官方提供的写法，整个页面会变得超长，且大部分都是重复的，所以这里我使用JSX试了一下，发现效果还不错，下面是实现过程
因为是模拟的，所以一些demo中写死但可以异步加载数据的地方会备注

那么我们要做的第一步就是要先初始化表头信息。从而保证数据的正确性

在表头处理完成后就可以去请求数据了，这里也模拟了一下，最终效果如下

iview+vue 使用中遇到的问题（表格selectradio）

1、iview+vue中，对表头的动态设置：

　　iview表头若是需要动态设置，可以有两个方法，第一种：

 children: [
            {
              title: ‘2017年‘,
              align: ‘center‘,
              key: ‘firstYear‘,
              renderHeader: (h, index) => {
                return h(‘div‘, {
                  domProps: {
                    innerHTML: this.data5.lastYear + ‘年‘
                  }
                });
              }
            },
            {

　　

　　利用renderheader属性来设置表头。iview中的table自定义列头显示内容，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 column 和 index，分别为当前列数据和当前列索引。还有一种方式是在直接调用title更改：

 

this.columns4[2].children[0].title = this.timeYear.lastYear;

　　但是这种方式可能会引起Vue的update无限循环警告。建议使用第一种方法。

2、iview+vue中，表单验证select出错：

　　可能在使用iview表单的select时，发现代码没有书写错误，但是验证功能出现问题，这是因为iview默认类型与最终select的需要验证的结果类型不一致。

3、iview+vue中，radio选择问题：

　　在iview的单选radio中，绑定选中状态lable = “0”与获取选中状态status = 0 是不匹配的，应为“0”。

结论：在iview使用过程中，要注意默认类型问题，很容易出现接收类型与默认类型不一致的情况而导致出现错误。对与表格自定义列的问题，render自定义列内容，renderheader自定义列头。