js文件引用vue实例

外部js文件info.js内部定义变量用于接收传入的实例

let  this = null;
export const receive = (vm) => (
	__this = vm;
}

然后在你的vue页面导入这个外部js文件,并传入this

import {receive} from './info.js';
// ...
created(){
	receive(this);
}
// ...

传入this一步后,外部文件中就可以使用this了。

在父组件点击按钮更新公共组件

给想要重新生成元素绑定key值,每次点击时候都会重新加载组件created() 生命周期函数每次都会执行,重新生成dom 元素。也省的用watch监听了!
从这学来的:https://blog.csdn.net/shi851051279/article/details/92802027

表头内容对齐方式不一致

	:row-style="rowStyle"
	:header-cell-style="headerstyle"

根据列字段组装行数

效果图
在这里插入图片描述
数据结构

    this.data = [
      {
        rent: { label: "单据确认提醒", checked: true },
        dehire: { label: "单据确认提醒", checked: true },
      },
    ];

代码实现
在这里插入图片描述
页面实现
在这里插入图片描述

互换位置字段上移、字段下移

在这里插入图片描述

根据字段手动触发排序

在这里插入图片描述

取消高亮行的选中样式

通过eltable事件取消选中状态

需要设置null可以

this.$refs.table.setCurrentRow(null);

获取当前事件中,选中行再点一次高亮行,取消选中态。

需要表格highlightcurrentrow 属性
页面元素绑定事件
对比是否之前的选中行,是则取消选中
取消选中态

判断用户勾选还是取消勾选

eltable标签加入select事件
在这里插入图片描述

通过elcheckboxchange事件取消选中状态

selection不满足我的要求时,改用el-checkbox
在这里插入图片描述
注意区别getRowsel-checkbox选中方法数据包含现在勾选行数据时,需要设置状态
在这里插入图片描述

手动触发el-checkbox onChange

场景勾选表格的数据,回显上方el-checkbox选中状态产品信息费用信息只能二选一。
用户操作会触发,用 js 修改不会触发的事件有:
selectonchange
input[type=“checkbox”]的onchange
input[type=“text”]的onchange
在这里插入图片描述
checkbox
在这里插入图片描述
用getRow事件将上方的checkbox表格选择联动起来
在这里插入图片描述
getRow事件逻辑
在这里插入图片描述

合并样式修改

根据鼠标移入移出改变样式

设置一个变量存放hover的数据行的key值,通过移入移出事件修改选中样式在这里插入图片描述在这里插入图片描述

js相关

得出这么多位小数原因

在这里插入图片描述

原文地址:https://blog.csdn.net/m0_48156716/article/details/128339637

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_38560.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注