iview -- 列表渲染

渲染函数

render: (h) => {
  return h('标签', {
    属性
  }, '填充文本')
}
render: (h) => {
  return h('div', [
    h('标签', {
     //  属性
      style: { color: '#432FDE' },
      attrs: { class: 'operation' },
    }, '填充文本')
  ])
}

列表渲染

export default {
  data () {
    return {
      column: [
        {
          title: '序号',
          align: 'center',
          width: 66,
          render: (h, params) => {
            return h('small', {}, (this.condition.pageNum - 1) * this.condition.pageSize + params.index + 1)
          }
        },
        // 最常见的匹配
        {
          title: '角色编码',
          key: 'code',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        // 字符匹配
        {
          title: '状态',
          width: 190,
          align: 'center',
          render: (h, params) => h('span', this.dic.state.find(({ code }) => (code === params.row.state)).name)
        },
        // 宽度自适应
        {
          title: ' '
        },
        // 自定义操作
        {
          title: '操作',
          width: 100,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h('span', {
                style: { color: '#432FDE' },
                attrs: { class: 'operation' },
                on: {
                  click: e => {
                    this.state(params)
                    e.stopPropagation()
                  }
                }
              }, '设置'),
              h('span', {
                style: { color: '#a08418' },
                attrs: { class: Object.keys(params.row.state)[0] === '1' ? 'operation' : 'unoperation' },
                on: {
                  click: e => {
                    this.setAble(params)
                    e.stopPropagation()
                  }
                }
              }, '禁用')
            ])
          })
        }
      ]
    }
  }
}

渲染函数实例

render: (h) => {
  return h('div', [
    h('Icon', {
      'class': 'spin-icon-load'
    }),
    h('div', {
      style: 'font-size:20px;'
      attrs: { class: Object.keys(params.row.state)[0] === '1' ? 'operation' : 'unoperation' },
      props: {
        type: 'ios-loading',
        size: 32
      },
      on: {
        click: e => {
          e.stopPropagation()
        }
      }
    }, '正在上传...')
  ])
}