iView修改Table组件中标题和内容的样式

iView修改Table组件中标题和内容的样式

iView是一个封装的比较好的Vue组件，所以当我们需要去修改其中部分组件的样式时，就没有修改普通CSS那么容易了，但我们还是有方法去修改的，下面列出一种解决修改样式问题的方案，亲测有效。

对于样式的修改我们要用到的是Table组件API中的两个重要函数：render，renderHeader，具体这两个函数的作用是什么我再次就不叙述了，不了解的可以官网上去看。iView中Table组件API官网链接

下面先附上代码，通过代码来讲解。

columns: [
        {
          key: "key",
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  fontSize: "18px"
                }
              },
              "标题"
            );
          },
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  fontSize: "18px"
                }
              },
              params.row.key
            );
          }
        },
      ]

我们先来介绍renderHeader函数，这个函数是修改Table标题的，"span"就是我们表格标题所用的HTML属性，“style"就是我们需要对标题修改的样式内容了，在这里我只设置了标题的字体大小，大家可以根据自己的实际情况去修改，但需要注意，在这个地方，对字体的修改用的是fontSize属性而不是我们平常所用到的CSS属性font-size，这个细节地方希望大家注意，renderHeader函数的第三参数就是标题的名称了，用renderHeader函数的写法取代了"title”，因此大家不需要在写"title"了。

接下来我们在介绍一下render函数，这个函数是Table组件用来渲染表格内容的函数，它也是有三个参数，"span"表示内容的HTML属性，"style"就是我们需要对内容去做样式的修改了，第三个参数就是当前标题下的内容了，这里需要注意的是"params.row"后面的"key"值，必须是上面我们声明的key。

总结一下，这两个函数是一个很好的东西，对我们解决其他问题也有一定的帮助，如果你对Vue的Render函数不是很懂的话，请尽快去了解Vue Render函数相关知识，这在你以后的开发中很有帮助。