iview的table组件中加入超链接组件，可编辑组件，选择组件，日期组件

客官°小女子只卖身不卖艺 2023-08-17 17:48 74阅读 0赞

--------------------

这篇文章主要介绍了iview的table组件中使用选择框，日期，可编辑表格，超链接等组件。

## 1.select选择组件 ##

// tableColumn数组响应对象需要传入一个固定的option数组，如果该数组是异步动态生成的该组件不能正常渲染，因为在获取option数组之前table渲染时option是undefined。
    supportSelect(item) {
         item.render = (h, params)=>{
             return h('Select', {
                 props: {
                     value: params.row[params.column.key],
                     size: 'small',
                     transfer: true
                 },
                 on: {
                     'on-change': (val)=>{
                         this.insideTableData[params.index][params.column.key] = val
                     }
                 },
             },item.option.map(item=>{
                 return h('Option', {
                     props: {
                         value: item.value || item,
                         label: item.label || item
                     }
                 }, item.label || item)
             }))
         }
         return item
     }

## 2.可编辑表格 ##

// 可编辑表格使用了contenteditable属性，使得表格编辑更加简单干净
    supportEdit(item, index){
        item.render = (h, params)=>{
            return h('div', {
                style: {
                    padding: '4px 0',
                    width: '100%'
                },
                props: {
                    value: this.insideTableData[params.index][params.column.key]
                },
                attrs: {
                    contenteditable: this.editable,
                    title: '点击可编辑'
                },
                on: {
                    'blur': evt=>{
                        evt.target.value = evt.target.innerText || params.row[params.column.key]
                        params.row[params.column.key] = evt.target.innerText
                        this.insideTableData[params.index][params.column.key] = evt.target.innerText
                    }
                }
            }, params.row[params.column.key])
        }
        return item
    }

## 3.日期组件 ##

// 使用iview的DatePicker组件渲染就行
    supportDate(item){
        item.render = (h, params)=>{
            return h('DatePicker', {
                props: {
                    clearable: false,
                    placeholder: '请选择日期',
                    value: params.row[params.column.key],
                    type: 'date',
                    format: 'yyyy-MM-dd',
                    size: 'small'
                },
                on: {
                    'on-change': (val)=>{
                        this.insideTableData[params.index][params.column.key] = val
                    }
                }
            })
        }
        return item
    }

## 4.表格中添加超链接 ##

// 这里的handleLink方法是在table组件中定义好的使用$emit让父组件调用
    supportLink(item){
        item.render = (h, params)=>{
            return h('a', {
                style: {
                    textDecoration: 'underline'
                },
                on: {
                    'click': ()=>{
                        this.handleLink(params.row)
                    }
                }
            }, params.row[params.column.key])
        }
        return item
    }

转载于:https://www.cnblogs.com/codebook/p/11605224.html