基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件

2018-08-11 admin

1、render渲染函数的介绍

字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

如果组件是一个函数组件,渲染函数还会接收一个额外的 context 参数,为没有实例的函数组件提供上下文信息。

2、如何使用render函数? 下面是vue官网的例子

var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children
      ? getChildrenTextContent(node.children)
      : node.text
  }).join('')
}

Vue.component('anchored-heading', {
  render: function (createElement) {
    // 创建 kebabCase 风格的ID
    var headingId = getChildrenTextContent(this.$slots.default)
      .toLowerCase()
      .replace(/\W+/g, '-')
      .replace(/(^\-|\-$)/g, '')

    return createElement(
      'h' + this.level,
      [
        createElement('a', {
          attrs: {
            name: headingId,
            href: '#' + headingId
          }
        }, this.$slots.default)
      ]
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

3、iview table组件介绍

主要用于展示大量结构化数据。 支持排序、筛选、分页、自定义操作、导出 csv 等复杂功能。

4、iview table组件的使用

<template>
    <Table :columns="columns1" :data="data1"></Table>
</template>
<script>
    export default {
        data () {
            return {
                columns1: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data1: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ]
            }
        }
    }
</script>

渲染成如下表格: clipboard.png

5、iview table render函数和renderHeader介绍

render:

自定义渲染列,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 row、column 和 index,分别指当前行数据,当前列数据,当前行索引,详见示例。 学习 Render 函数的内容

renderHeader:

自定义列头显示内容,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 column 和 index,分别为当前列数据和当前列索引。

6、iview table render函数的使用

<template>
    <Table border :columns="columns7" :data="data6"></Table>
</template>
<script>
    export default {
        data () {
            return {
                columns7: [
                    {
                        title: 'Name',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, 'View'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                data6: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park'
                    }
                ]
            }
        },
        methods: {
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name:${this.data6[index].name}<br>Age:${this.data6[index].age}<br>Address:${this.data6[index].address}`
                })
            },
            remove (index) {
                this.data6.splice(index, 1);
            }
        }
    }
</script>

渲染成如下table

clipboard.png 7、iview render和renderHeader结合自定义组件,渲染table表格

QiDropdown.vue组件代码如下:

<style lang="postcss" scoped>
.dd{
    & .ivu-select-dropdown{
        max-height: 100% !important;
    }
    & .ivu-select-dropdown{
        max-height: 100% !important;
    }
    & >.ddm{
        text-align: left;
        font-weight:normal;
        & .active{
            color:#008cee
        }
    }    
}
</style>
<template>
<div class="dd">
    <Dropdown :placement="placement" @on-click="ddClick" transfer >
        <span v-if="content.length > 0" style="cursor:pointer">
            {{content}}            
            <Icon type="arrow-down-b" v-if="showArrow"/>
        </span>
        <Icon type="plus" v-else style="cursor:pointer"></Icon>
        <DropdownMenu slot="list" class="ddm">
            <DropdownItem v-for="(item, index) in data" :key="index" :name="item.value" 
                :style="{color:localChoosedItem == item.value ? activeColor:defaultColor}">{{item.name}}</DropdownItem>
            <slot name="diy"></slot>
        </DropdownMenu>
    </Dropdown>
</div>
</template>
<script>
export default {
    data(){
        return{
            activeColor:'#008cee',
            defaultColor:'#495060',
            localChoosedItem:''
        }
    },
    props:{
        placement:{
            type:String,
            default:'bottom-start'
        },
        showArrow:{
            type:Boolean,
            default:false
        },
        content:{
            type:String,
            default:''
        },
        data:{
            type:Array,
            default:()=>{
                return [];
            }
        },
        choosedItem:{
            type:String,
            default:''
        }
    },
    watch:{
        choosedItem:{
            immediate:true,
            handler(newv,oldv){
                this.localChoosedItem = newv;
            }
        }
    },
    created(){

    },
    methods:{
        ddClick(name){
            this.$emit('on-choosed',name);
            this.localChoosedItem = name;
        }
    }
}
</script>

8、父组件引入QiDropdown组件并应用到table 的render和renderHeader函数中

import QiDropdown from '@/components/QiDropdown'

export default {
    name: 'email-list',
    components:{
        QiDropdown
    },
...
columns: [
                {
                    title: '标注',
                    key: 'callout',
                    align:'center',
                    renderHeader:(h,params)=>{
                        return h(QiDropdown,{
                            props:{                                
                                placement:'bottom-start',
                                showArrow:true,
                                content:'标注',
                                data:this.flags
                            },
                            on:{
                                'on-choosed':(value)=>{        
                                    this.queryForm.callout = value;                            
                                    this.getResumeFromEmailBy();
                                }
                            }
                        });
                    },
                    render:(h,params)=>{
                        return h(QiDropdown,{
                                props:{
                                    content:params.row.callout||'',
                                    data:this.flags.slice(1)
                                },
                                on:{
                                    'on-choosed':(value)=>{
                                        this.choosedFlag(params.row.id,value);    
                                    }
                                }
                            },[ 
                                h('DropdownItem',
                                {
                                    slot: 'diy',
                                    style:{
                                        color:'#2d8cf0'
                                    },
                                    props:{
                                        name:'add',
                                        divided:true
                                    }
                                }, 
                                '添加并标注'),
                                h('DropdownItem',
                                {
                                    slot: 'diy',
                                    style:{
                                        color:'#2d8cf0'
                                    },
                                    props:{
                                        name:'clear'
                                    }
                                }, 
                                '清除该标注')
                            ]);

                    }
                }, 
                ...

渲染成如下所示: clipboard.png

clipboard.png

9、总结: 1)有了render函数加上自定义组件,那么你再也不怕iview table组件功能的单调了,一开始我也以为iview table功能太少,现在有了它,你可以实现你任何想实现的表格了,非常简单!

2)iview Dropdown组件上一定要加 transfer 属性,否则它不能正常显示出来

3)render函数可以使用slot,如我的QiDrowdown组件里面有一个slot name=diy,那它在render函数里面就是要写到QiDrowdownr 数组中,如:

h(QiDrowdown,
{//这里写QiDrowdown属性props、事件on、样式style等等},
[//这里可以写slot组件,也可以是其它组件,如果是slot你要这样写:
    h('DropdownItem',
                                {
                                    slot: 'diy',//记住这里要写上QiDrowdown组件slot的name
                                    style:{
                                        color:'#2d8cf0'
                                    },
                                    props:{
                                        name:'add',
                                        divided:true
                                    }
                                }, 
                                '添加并标注'),

这样渲染就等于是这样写:
<QiDrowdown>
    <DropdownItem slot="diy" style="color:#2d8cf0" name="add" divided></DropdownItem>
</QiDrowdown>
])

10、引用 1)vue Render中slots的使用 2)渲染函数 & JSX

原文链接:https://segmentfault.com/a/1190000015970367

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37768.html

文章标题:基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件

相关文章
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回&quot;undefined&quot;:一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
回到顶部