VUE3 对于封装的tabel 没有过滤器情况下 如何过滤数据/时间戳装换(vue3 尤大去掉了过滤器)

281 阅读1分钟

1. 在项目中创建一个ts文件

1.  class Time {
1.       // 格式化时间
1.       public formatTime(time: number) {
1.           let date = new Date(time);
1.           let year = date.getFullYear();
1.           let month = date.getMonth() + 1;
1.           let day = date.getDate();
1.           let hour = date.getHours();
1.           let minute = date.getMinutes();
1.           let second = date.getSeconds();
1.           return year + "-" + month.toString().padStart(2"0") + "-" + day.toString().padStart(2"0")
1.               + " " + hour.toString().padStart(2"0") + ":" + minute.toString().padStart(2"0")
1.               + ":" + second.toString().padStart(2"0");
1.       }
1.  }
1.      
1.  const time = new Time();
1.  export default time;
1.

2.在需要的模板中调用time 方法

微信图片_20220426152021.png

3. 需要在模板引用

微信图片_20220426152012.png

4. 对于封装的table 来说,这就用到了slot 新建template 如图

微信图片_20220426152025.png

4.1 slot 名称要与template 名称一致

微信图片_20220426152021.png

如遇到数据过滤 可见图解 做法类似

微信图片_20220426152749.png

微信图片_20220426152753.png