iview -- 列表渲染

向右看齐 2021-09-19 12:28 465阅读 0赞

### 渲染函数 ###

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()
            }
          }
        }, '正在上传...')
      ])
    }