iview 用render函数 实现 第一列 加标题

iview 用render函数 实现 第一列 id 列 加标题 No.1...
效果如图：

~ Talk is cheap, Show me the code.

最后一列的实现，用了render函数的嵌套，有点乱，谨慎看...

columns 代码配置如下：

      columns1: [
        {
          title: 'id',
          // type: 'index',
          align: 'center',
          render: (h, params) => {
            return h('p', {
              class: 'indexStyle',
              style: {
                height: '0.2rem',
                // fontSize: '0.05rem',
                fontFamily: 'Myriad Pro',
                // fontWeight: '400',
                color: '#00A0FE',
                lineHeight: '0.18rem',
                // lineHeight: '20px',
                cursor: 'pointer',
                // width: '32px',
                width: '0.4rem',
                opacity: '0.4'
              }
            },
              ('No.' + (params.index + 1)))
          },
          ellipsis: true,
          height: 10,
          width: 32,
          minWidth: 30
        },
        {
          title: '名称',
          align: 'center',
          key: 'cameraName',
          // slot: 'cameraName',
          tooltip: true,
          minWidth: 120
        },
        {
          title: '位置',
          align: 'center',
          key: 'cameraPostion',
          tooltip: true,
          minWidth: 100
        },
        {
          title: '状态',
          align: 'center',
          key: 'cameraStatus',
          minWidth: 50,
          render: (h, params) => {
            if (params.row.cameraStatus === '在线') {
              return h('div', {
                style: {
                  width: '100px',
                  height: '20px',
                  display: 'inline-block'
                }
              }, [
                h('span', {
                  style: {
                    width: '.1rem',
                    height: '.1rem',
                    display: 'inline-block',
                    border: '1px solid #0cf9e5',
                    borderRadius: '50%',
                    backgroundColor: '#0cf9e5',
                    opacity: '0.5',
                    letterSpacing: '0.03rem',
                    marginRight: '.05rem'
                  }
                }),
                h('span', { style: {
                  lineHeight: '0.19rem',
                  color: '#FFFFFF',
                  fontSize: '0.14rem',
                  fontFamily: 'PingFang SC',
                  fontWeight: 'bold',
                  letterSpacing: '0.03rem'
                } }, '在线')
              ])
            } else if (params.row.cameraStatus === '离线') {
              return h('div', {
                style: {
                  width: '100px',
                  height: '20px',
                  display: 'inline-block'
                }
              }, [
                h('span', {
                  style: {
                    width: '.1rem',
                    height: '.1rem',
                    display: 'inline-block',
                    border: '1px solid #8c8c8c',
                    borderRadius: '50%',
                    backgroundColor: '#8c8c8c',
                    opacity: '0.5',
                    letterSpacing: '0.03rem',
                    marginRight: '.05rem'
                  }
                }),
                h('span', { style: {
                  lineHeight: '0.19rem',
                  color: '#FFFFFF',
                  fontSize: '0.14rem',
                  fontFamily: 'PingFang SC',
                  fontWeight: 'bold',
                  letterSpacing: '0.03rem'
                } }, '离线')
              ])
            }
          }
        }
      ],

附上id列的样式css：

<style>
.indexStyle{
    font-size: .01rem !important;
    /* fontSize: '0.05rem', */
    display: inline-block;
    /* background-image: url('~@/assets/images/panel3/No-bg.png'); */
    background-image: url('~@/assets/images/panel4/border.png');
    background-size: 0.4rem 0.2rem;
    width: 0.4rem;
    height: 0.2rem;
    line-height: .2rem;
    /* background-size: 80%; */
    background-position: center;
    background-repeat: no-repeat;
    font-size: .1rem;
    font-family: Myriad Pro;
    font-weight: 400;
    color: #00A0FE;
    text-align: center;
    opacity: 1
}
</style>

最后附上data的数据格式参考：
data1: [
{
id: 1,
cameraName: '视频点一(视频探头名称)',
cameraLocation: 'https://view.2amok.com/20191214/6159ad21700640c8e6702e10ec9c1e4d.mp4',
cameraPostion: '3F_0311 ',
cameraStatus: '在线'
},
{
id: 2,
cameraName: '视频点二(视频探头名称)',
cameraLocation: 'https://view.2amok.com/2019926/080a2e0299b382bdacad10967179f501.mp4',
cameraPostion: '3F_0311 ',
cameraStatus: '在线'
},
{
id: 3,
cameraName: '视频点三(视频探头名称)',
cameraLocation: 'https://view.2amok.com/20191214/6159ad21700640c8e6702e10ec9c1e4d.mp4',
cameraPostion: '3F_0311 ',
cameraStatus: '离线'
},
{
id: 4,
cameraName: '视频点四(视频探头名称)',
cameraLocation: 'https://view.2amok.com/2019926/080a2e0299b382bdacad10967179f501.mp4',
cameraPostion: '3F_0311 ',
cameraStatus: '在线'
},
{
id: 5,
cameraName: '视频点五(视频探头名称)',
cameraLocation: 'https://view.2amok.com/2019926/080a2e0299b382bdacad10967179f501.mp4',
cameraPostion: '3F_0311 ',
cameraStatus: '离线'
},
{
id: 6,
cameraName: '视频点六(视频探头名称)',
cameraLocation: 'https://view.2amok.com/2019926/080a2e0299b382bdacad10967179f501.mp4',
cameraPostion: '3F_0311 ',
cameraStatus: '在线'
},
{
id: 7,
cameraName: '视频点七(视频探头名称)',
cameraLocation: 'https://view.2amok.com/2019926/080a2e0299b382bdacad10967179f501.mp4',
cameraPostion: '3F_0311 ',
cameraStatus: '离线'
},
{
id: 8,
cameraName: '视频点八(视频探头名称)',
cameraLocation: 'https://view.2amok.com/2019926/080a2e0299b382bdacad10967179f501.mp4',
cameraPostion: '3F_0311 ',
cameraStatus: '在线'
},
{
id: 9,
cameraName: '视频点九(视频探头名称)',
cameraLocation: 'https://view.2amok.com/2019926/080a2e0299b382bdacad10967179f501.mp4',
cameraPostion: '3F_0311 ',
cameraStatus: '离线'
},
],