码迷,mamicode.com
首页 > 其他好文 > 详细

使用vue自定义指令合并iview表格单元格

时间:2019-09-25 00:25:36      阅读:1261      评论:0      收藏:0      [点我收藏+]

标签:ssi   binding   初始   演示   动态   log   过程   app   address   

使用vue自定义指令合并iview表格单元格,

我们在开发过程中发现iview表格组件,官网只提供了合并表头的demo,并没有合并表格中的单元格。

ivew表头分组:https://www.iviewui.com/components/table#BTFZ

效果图如下:

技术图片

 

 具体实现思路,通过vue自定义属性来操作dom,达到我们想要的效果:

代码如下: demo.vue  表格页面

<template>
   
    <div class="demo"><Table :columns="columns1" :data="data1" border ></Table>
<!--        <input v-focus=‘666‘ />-->


    </div>
</template>

<script>
    export default {
        name: ‘demo‘,
/*
        // 说明:我在写这个demo的时候发现  render 函数中 使用指令时 使用局部指令 没有效果,使用全家指令有效果
        //使用指令操作 dom
        directives: {

            focus: {
                // 指令的定义
                bind: function(el, bind){
                    console.dir(el);
                    console.log(el, bind, ‘bind‘);
                },
                inserted: function (el, bind) {
                    //el.focus()
                    console.dir(el);
                    console.log(el, bind, ‘dom元素‘);
                }
            }
        },

*/
        data () {
            return {
                columns1: [

                    {
                        title: ‘Name‘,
                        key: ‘name‘,
                        // align: ‘center‘,
                        render: (h, params)=>{
                            return h(‘div‘, {
                                style: {
                                    color: ‘green‘,
                                    textAlign: ‘center‘,
                                },
                                // 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
                                // 赋值,因为 Vue 已经自动为你进行了同步。

                                directives: [
                                    {
                                        name: ‘cell‘,
                                        arg: ‘colSpan‘,
                                        value: 2,
                                        //value: ‘2‘
                                        //expression: ‘1 + 1‘,
                                        //modifiers: {
                                        //bar: true
                                        //}
                                    },{
                                        name: ‘rmcell‘,
                                        arg: ‘colSpan‘,
                                        value: 2,
                                    }
                                ],

                            }, params.row.name);
                        }

                    },

                    {
                        title: ‘演示合并列‘,
                        key: ‘‘
                    },


                    {
                        title: ‘Age‘,
                        key: ‘age‘
                    },
                    {
                        title: ‘Address‘,
                        key: ‘address‘
                    },
                    {
                        title: ‘爱好‘,
                        key: ‘hobby‘,
                        className: ‘no-hover‘,  //加在 td 上
                        render: (h, params)=>{

                            let dir = null;
                            //第一个tr 元素 中的 td 合并,其他tr 多出的 td删除
                            if(params.index === 0){
                                dir = [
                                    {
                                        name: ‘cell‘,
                                        arg: ‘rowSpan‘,
                                        value: this.data1.length,
                                        //value: ‘2‘
                                        //expression: ‘1 + 1‘,
                                        //modifiers: {
                                        //bar: true
                                        //}
                                    }
                                ];
                            }else{
                                dir = [
                                    {
                                        name: ‘rmcell‘,
                                        // arg: ‘‘,
                                        // value: ‘‘,
                                        //value: ‘2‘
                                        //expression: ‘1 + 1‘,
                                        //modifiers: {
                                        //bar: true
                                        //}
                                    }
                                ];

                            }



                            return h(‘span‘, {
                                style: {
                                    color: ‘red‘
                                },
                                // 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
                                // 赋值,因为 Vue 已经自动为你进行了同步。

                                directives: dir,

                            }, params.row.hobby);
                        }
                    },



                ],
                data1: [
                    {
                        name: ‘John Brown‘,
                        age: 18,
                        address: ‘New York No. 1 Lake Park‘,
                        date: ‘2016-10-03‘,
                        hobby: ‘编码‘,
                    },
                    {
                        name: ‘Jim Green‘,
                        age: 24,
                        address: ‘London No. 1 Lake Park‘,
                        date: ‘2016-10-01‘,
                        hobby: ‘编码‘,
                    },
                    {
                        name: ‘Joe Black‘,
                        age: 30,
                        address: ‘Sydney No. 1 Lake Park‘,
                        date: ‘2016-10-02‘,
                        hobby: ‘编码‘,
                    },
                    {
                        name: ‘Jon Snow‘,
                        age: 26,
                        address: ‘Ottawa No. 2 Lake Park‘,
                        date: ‘2016-10-04‘,
                        hobby: ‘编码‘,
                    }
                ]
            }
        },


    }

</script>

<style scoped>
    .demo>>> div.ivu-table-wrapper tr:hover td.no-hover {
        background: #fff;
    }
</style>

在main.js里注册全局指令(或你把指令抽离出去最后引入main.js即可):

/**
 * // 注册一个全局自定义指令 `v-cell` 动态指令
 * /动态内容 rowSpan  合并行
 *           colSpan  合并列
 *  详见:https://cn.vuejs.org/v2/guide/custom-directive.html
 *  render 函数中 动态内容 传递参数 给  arg
 *          {
              name: ‘my-custom-directive‘,
              arg: ‘foo‘,   //动态 rowSpan或colSpan
              value: ‘2‘,
              expression: ‘1 + 1‘,
              modifiers: {
                bar: true
              }
            }
    详见:https://cn.vuejs.org/v2/guide/render-function.html
 */

Vue.directive(‘cell‘, {
    // bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    bind: function(el, binding){
        console.dir(el);
        console.log(el, binding, ‘指令绑定‘);
    },
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el, binding) {
        console.dir(el);
        console.log(el, binding, ‘指令插入‘);
        //找到td 元素 添加 更改 合并   rowSpan 或 colSpan
        el.parentNode.parentNode[binding.arg] = binding.value;
        console.dir(el.parentNode.parentNode.rowSpan);
    }
});
/**
 * rmcell  指令移除 表格单元格
 * /动态内容 rowSpan  合并行
 *           colSpan  合并列
 *           当动态内容为 rowSpan  移除的是当前元素
 *                     为 colSpan  移除的是紧跟其后的 td元素
 *
 * */
Vue.directive(‘rmcell‘, {
    // bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    bind: function(el, binding){
        console.dir(el);
        console.log(el, binding, ‘指令绑定‘);
    },
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el, binding) {
        console.dir(el.parentNode.parentNode);
        console.log(el, binding, ‘移除指令插入‘);
        //找到td 元素 移除
        if(binding.arg === ‘rowSpan‘){
            el.parentNode.parentNode.remove();
        }else {
            let parent = null;
            //合并n列 删除 n-1 次 单元格 的 下一个元素
            for(let i = 0; i < binding.value - 1; i++){
                el.parentNode.parentNode.nextSibling.remove();
                console.log(‘执行次数‘);
            }
        }

    }
});

代码中用到了动态指令:

详见:https://cn.vuejs.org/v2/guide/custom-directive.html

render函数中使用指令:

详见:https://cn.vuejs.org/v2/guide/render-function.html

使用vue自定义指令合并iview表格单元格

标签:ssi   binding   初始   演示   动态   log   过程   app   address   

原文地址:https://www.cnblogs.com/taohuaya/p/11581989.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!