Vue グローバル フィルターの使用
次のように新しい filters.js を作成します。コンテンツ フィルタリング用の独自の関数を作成できます。エクスポートすることを忘れないでください。
import dayjs from "dayjs";
// 转小写
let lower = value => value.toLowerCase();
// 转大写
let upper = value => value.toUpperCase();
let currencyStyle = (value, style) => {
// 货币格式
/**
* style:
* currency：货币
* number： 数字格式
*/
if (style == 'number') {
// 数字格式
return parseFloat(value.replace(/[^\d\.-]/g, ""));
} else {
// 货币格式, 并保留2位小数
var n = 2;
value = parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
var l = value.split(".")[0].split("").reverse(),
r = value.split(".")[1];
var t = "";
for (var i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
}
return t.split("").reverse().join("") + "." + r;
}
}
/**
* 时间过滤器
* @param {*} time 传入毫秒
* @returns 返回0′23″这样子
*/
let timeFilter = (time) => {
// 货币格式
if (time == null || time == undefined || time == 0) {
return time;
}
const day = dayjs(0).millisecond(Number.parseInt(time));
let str = "";
if (day.minute() >= 0) {
str += day.minute() + "′";
}
if (day.second() >= 0) {
str += day.second() + "″";
}
return str;
}
export {
lower,
upper,
currencyStyle,
timeFilter
}
main.jsで導入されました
//挂载全局过滤
import * as filters from '@/utils/filters.js'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
ローカルコンポーネントでシーンを直接使用する
例: 三項でフィルターを使用する
<span >{
{
item.qualified == null? "-": $options.filters.timeFilter(item.qualified)}}</span>
例: ページ内で直接フィルタリングを使用する
<el-table-column label="（表现 | 分数）" align="center" min-width="200">
<template slot-scope="scope">
<div class="cur">
{
{
scope.row.cantileveredArm | timeFilter }}</span>
</div>
</template>
</el-table-column>