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

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

ivew表头分组：

效果图如下：

 

 具体实现思路，通过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