使用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
原文地址：https://www.cnblogs.com/taohuaya/p/11581989.html
时间： 2024-10-06 23:32:51