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

Posted codebook

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iview的table组件中加入超链接组件,可编辑组件,选择组件,日期组件相关的知识,希望对你有一定的参考价值。


这篇文章主要介绍了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
}

以上是关于iview的table组件中加入超链接组件,可编辑组件,选择组件,日期组件的主要内容,如果未能解决你的问题,请参考以下文章

怎样让iview的table表格,多选默认全选中

html中加入超链接方式的汇总

iview表格导出Excel时遇到的问题:导出.xls文件&导出的表格部分列错位

iview修改table组件实现循环向上滚屏

iview Table表格组件无法拆分单元格的解决思路

VUE -- iview table 组件 中使用 upload组件 上传组件 on render 事件不会触发问题