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

Posted 2022-11-30 taohuaya

使用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