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

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

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

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

效果图如下：

 

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

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

html结构：

 

 

在main.js里注册全局指令（或你把指令抽离出去最后引入main.js即可 通过 import './directives'; //全局的指令 你的指令文件 ）：

/**
 * // 注册一个全局自定义指令 `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

转载于:https://www.cnblogs.com/taohuaya/p/11581989.html