iview的Table之render函数设置DOM属性值的方法

这里写图片描述
需求:使用iview的Table组件实现上述表格

<Table border :columns="columns" :data="list" no-data-text="暂无项目"></Table>
 columns: [
          {
            title: '项目名称',
            key: 'name',
            align: 'center',
            width: 240,
            render: (h, params) => {
              return h('div',
                {
                  style: {
                    padding: '10px',
                  }
                }, [
                  h('img', {
                    domProps: {
                      src: '../../../static/images/data/p1.jpg',
                    },
                    props: {},
                    style: {
                      marginBottom: '5px',
                      width: '155px',
                      height: '89px'
                    },
                  }),
                  h('p', params.row.name)
                ]);
            }
          },
          {
            title: '提交日期',
            key: 'time',
            width:135,
            align:'center'
          },
          {
            title: '认购人数',
            key: 'rgrs',
            width:100,
            align:'center'
          },
          {
            title: '认购金额',
            key: 'rgj',
            width:100,
            align:'center'
          },
          {
            title: '完成',
            key: 'wc',
            width:100,
            align:'center'
          },
          {
            title: '状态',
            key: 'zt',
            width:120,
            align:'center'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'dashed'
                  },
                  style: {
                    // marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '管理项目'),
              ]);
            }
          }
        ],
        list: [
          {
            name: 'John Brown',
            time: '2018-08-08 22:00',
            rgrs: '88',
            rgj: '¥812112',
            wc: '5.55%',
            zt: '审核不通过',
          },
          {
            name: 'John Brown',
            time: '2018-08-08 22:00',
            rgrs: '88',
            rgj: '¥8',
            wc: '5.55%',
            zt: '审核不通过',
          },
          {
            name: 'John Brown',
            time: '2018-08-08 22:00',
            rgrs: '88',
            rgj: '¥8',
            wc: '5.55%',
            zt: '审核不通过',
          },
        ]

注:如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps!
props是iview内置组件的设置样式用法

猜你喜欢

转载自blog.csdn.net/suolong914/article/details/81607461