iview的Table添加表头点击事件来修改表头字段和删除选中的一列
今天收到一个需求,给表格的表头添加鼠标右击事件,点击某一列还要给当前列添加背景色,后端返回的数据极其简单,只有title和key,于是使用循环改造表头的数据
for (let i = 0; i < this.tableHeader.length; i++) {
this.tableHeader[i].align = "center"; //内容剧中
this.tableHeader[i].tooltip = true; //tooltip提示
if (i === 0) { //第一列序号窄一点
this.tableHeader[i].minWidth = 40;
} else {
this.tableHeader[i].minWidth = 100;
if (!this.tableHeader[i].renderHeader) {
this.tableHeader[i].renderHeader = (h, column) => {
return h("div", [
h("span", {
domProps: {
innerHTML: column.column.title, //自定义的列头的标题
},
on: {
mousedown: (e) => {
//自定义列头的右击事件
this.rightClick(column, e);
},
},
}),
]);
};
}
}
}
如此便给表头的每一列添加了一个rightClick事件
这是右击展现的DOM
<!-- 右击表头触发显示 -->
<div class="floatDel" v-if="showDel" :style="{left:floatleft,top:floatTop}">
<p @click="editFiled">
<i class="iconfont"></i> 修改字段名称
</p>
<p @click="delFiled">
<i class="iconfont"></i> 删除该字段
</p>
</div>
鼠标右击事件:
rightClick(value, e) {
if (e.buttons === 2) { //如果是右击
this.showDel = true; //展现DOM
this.floatleft = e.clientX + "px"; //将DOM展现的位置处于鼠标点击的位置
this.floatTop = e.clientY + "px";
this.params = value; //记录当前点击的列
} else {
this.showDel = false
}
//为点击的列添加背景色,采用的是iview的className,可以看看iview
let oldTab = this.tableHeader; //先用变量获取表头
this.tableHeader = []; //置空表头
oldTab.map((item) => {
if (item.className) {
delete item.className; //删除每一列的背景色
}
});
let obj = oldTab[value.index]; //获取当前点击的列
obj.className = "table-info-column"; //为当前点击的列添加背景样式
oldTab.splice(value.index, 1, obj); //替换点击列的对象
this.tableHeader = oldTab;// 表头重新获取处理后的数组
//这样转一层的目的是为了触发DOM渲染,当然也有别的方法
}
效果:
删除的方法
//删除字段
delFiled() {
this.showDel = false;
this.tableHeader.map((item, index) => {
if (item.key === this.params.column.key) {
this.tableHeader.splice(index, 1);
}
});
},
修改表头的方法是我点击后打开一个弹窗,里面一个输入框,将修改的值输完后点击确定,拿到获取的值,赋值给当前点击的列
修改后关闭弹窗触发的方法
//关闭编辑字段的弹窗
disbleDialog(data) {
this.showEditDialog = data.showDialog;
if (data.newFiledName) {
this.tableHeader.map((item, index) => {
if (item.key === this.params.column.key) {
item.title = "";
this.$nextTick(() => {
item.title = data.newFiledName;
});
}
});
}
},
大概就这样实现了,若有改进之处,望多多指教,一起学习一起成长
这样缺点是只有点击表头上的字才有效果,可以在div上加一个事件,比如
renderHeader: (h, column) => {
return h('div',
{
on: {
mousedown: (e) => {
// 自定义列头的右击事件
this.rightClick(column, e)
}
}
}, []
顺便改一下表头的样式,.ivu-table-cell的padding啥的去掉,宽高填满