iView组件表单render应用

实现：
1.表单字体颜色，下划线，居中
2.内部可以实现js代码的实现

代码：
修改表格字段信息，可以做这里修改接收数据，性能更好

{
						title: "开始对接时间",
						align: "center",
						key: "TIME",
						render: (h, params) => {
							params.row.TIME = params.row.TIME ? params.row.TIME.replace("T", " ").slice(0, 19) : '';
							return h(
								"div", {
									style: {},
								},
								params.row.TIME
							);
						},
						width: 240,
					},

展示

这里修改表格信息的样式

{
          align: "center",
          title: "地区",
          children: [
            {
              align: "center",
              title: "市",
              key: "CITY",
              width:120,
              render: (h, params) => {
                return h(
                  "div",
                  {
                    style: {
                      cursor: "pointer",
                      ...(params.row.CITY == "湖南省"
                        ? { color: "black" }
                        : { color: "#58a3f8" }),
                      ...(params.row.CITY == "湖南省"
                        ? { textDecoration: "none" }
                        : { textDecoration: "underline" })
                    },
                    on: {
                      click: () => {
                        this.collapse(params.row, params.index);
                      }
                    }
                  },
                  params.row.CITY
                );
              }
            },
            {
              align: "center",
              title: "区、县",
              key: "CNTY",
              width:120,
            }
          ]
        },
       

展示

{
						title: "设备类型",
						align: "center",
						key: "NAME_LX",
						width: 200,
						render: (h,params)=>{
						  return h('div',[
						    h('span',{
						      style: {
							    display: 'block',
								padding: '0 5px',
								height: '25px',
								fontSize: '16px',
								borderBottom: '1px solid #e8eaec',
								  }
								},'水雨情(RTU)'),
								h('span', {
								style: {
							    display: 'block',
								padding: '0 5px',
								height: '25px',
								  fontSize: '16px'
									}
									},'图像及视频(VD)')
							])
						}
					},

这里是修改表单样式，一格双行数据，在数组【】内多添加一个属性
展示

一条三行

{
						title: '对接类型',
						key: 'djtype',
						align: "center",
						width: 160,
						render: (h, params) => {
							return h('div', [
								h('span', {
										style: {
											display: 'block',
											padding: '0 5px',
											height: 'calc(100% / 3 * 2)',
											lineHeight: '400%',
											fontSize: '16px',
											borderBottom: '1px solid #e8eaec',
										}
									}, '4G'),
								h('span', {
										style: {
											display: 'block',
											padding: '0 5px',
											height: 'calc(100% / 3 )',
											lineHeight: '200%',
											fontSize: '16px'
										}
									}, 'NB')
							])
						},
					},
					{
						title: '测站编号',
						key: 'tenstation',
						align: "center",
						width: 160,
						render: (h, params) => {
							return h('div', [
								h('span', {
									style: {
										display: 'block',
										padding: '0 5px',
										height: 'calc(100% / 3 )',
										lineHeight: '200%',
										fontSize: '16px',
										borderBottom: '1px solid #e8eaec',
									}
								}, params.row.shebeiTypes[0].tenstation),
								h('span', {
									style: {
										display: 'block',
										padding: '0 5px',
										height: 'calc(100% / 3 )',
										lineHeight: '200%',
										fontSize: '16px',
										borderBottom: '1px solid #e8eaec',
									}
								}, params.row.shebeiTypes[1].tenstation),
								h('span', {
									style: {
										display: 'block',
										padding: '0 5px',
										height: 'calc(100% / 3 )',
										lineHeight: '200%',
										fontSize: '16px'
									}
								}, params.row.shebeiTypes[2].tenstation)
							])
						}
					},

render: 自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引。

在render内部设置样式
1.style
2.设置class

render内部样式

1.style 内部
“div”,等标签是当前表格的一个格子，嘿嘿，我只会用，底层要去爬取