序文
データの視覚化は、最新のソフトウェア開発に不可欠な部分です。開発において、el-table は一般的に使用されるテーブル コンポーネントであり、フォーマッタメソッドを通じてデータのフォーマットを簡単に実装できます。この記事では、 el-tableのフォーマッタメソッドの使い方を詳しく紹介します。
通常の書き込み:
<el-table :data="tableData" border>
<el-table-column prop="type" label="种类">
<template slot-scope="scope">
<span v-if="scope.row.type == '1'">类型1</span>
<span v-if="scope.row.type == '2'">类型2</span>
<span v-if="scope.row.type == '3'">类型3</span>
</template>
</el-table-column>
</el-table>
フォーマッタとは何ですか?
formatter簡単に言うと、関数を使用してテーブル内のデータをさらに処理できます。
formatter関数の 3 つの基本パラメータ
| パラメータ | 説明 |
|---|---|
| 価値 | フィールド値 |
| 行 | セル行データ |
| 索引 | セル行インデックス |
使用
ここまでで関数の使い方のformatter基本を理解したので、次にformatter関数を使ってテーブル内のデータをフォーマットしてみます。
例
<template>
<div>
<el-table :data="tableData">
<el-table-column align="center" type="index" label="序号"></el-table-column>
<el-table-column align="center" prop="type" label="种类" :formatter="typeFormat"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// 模拟表格数据
tableData: [
{
type: 1,
},
{
type: 2,
},
{
type: 3,
},
],
// 模拟匹配数据
options: [
{
value: "1",
label: "第一种类型",
},
{
value: "2",
label: "第二种类型",
},
{
value: "3",
label: "第三种类型",
},
{
value: "n",
label: "第n种类型",
},
],
};
},
methods: {
//表格中formatter绑定的typeFormat方法
typeFormat(row, column) {
if (this.options) {
//非空判断是为了避免循环的数组为null而产生报错
var data = "";
this.options.forEach((item, index) => {
if (row.type == item.value) {
data = item.label;
}
});
return data;
}
},
},
};
</script>
結果の表示:
上で示したケースでは、バックグラウンドによって返される辞書値は 1 つだけです。要件によっては、バックグラウンドが 1 つの値または複数の値を返すことが必要になる場合があります。つまり、返される値は次のとおりである場合があります。このデータはどのように扱うtypeべきでしょうか?"1""1,3"
例
<template>
<div>
<el-table :data="tableData">
<el-table-column align="center" type="index" label="序号"></el-table-column>
<el-table-column align="center" prop="type" label="种类" :formatter="typeFormat"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// 模拟表格数据
tableData: [
{
type: "1,2",
},
{
type: "2",
},
{
type: "1,2,3",
},
],
// 模拟匹配数据
options: [
{
value: "1",
label: "第一种类型",
},
{
value: "2",
label: "第二种类型",
},
{
value: "3",
label: "第三种类型",
},
{
value: "n",
label: "第n种类型",
},
],
};
},
methods: {
//表格中formatter绑定的typeFormat方法
typeFormat(row, column) {
var data = [];
// 防止接口返回null而产生报错等问题
if (row.type == null) {
row.type = "";
}
// 先将其分割成字符串数组
let resMap = row.type.split(",");
resMap.map((item) => {
if (this.options) {
this.options.forEach((e, index) => {
if (item == e.value) {
data.push(e.label);
}
});
}
});
// 最后把处理好的数据转换为一个字符串，以“,”隔开
data = data.join("，");
return data;
},
},
};
</script>
結果の表示:
パブリック列挙型トランスコーディングをカプセル化する
プロジェクト内の複数の場所で同じデータ ソースが使用されている場合n、現時点ではそれをパブリック メソッドにカプセル化し、パラメーターを渡してパラメーターを接続することでトランスコードされた中国語を返すことを検討する必要があります。
実装プロセス
1. ホーム ページ、またはログイン後に入力されたページを選択してインターフェイスをリクエストし、次のようにさまざまなパラメータを渡すことで、対応する返されたデータをブラウザに保存しようとします。
mounted() {
this.findByName("car_type");
this.findByName("pfjd_type");
this.findByName("cpys_type");
this.findByName("rlzl_type");
this.findByName("industry_type");
},
methods: {
// 调用接口并将参数传递进来
findByName(value) {
findByName(this.$qs.stringify({
name: value })).then((res) => {
if ("car_type" == value) {
sessionStorage.setItem("carTypeList", JSON.stringify(res.data));
}
if ("pfjd_type" == value) {
sessionStorage.setItem("pfjdTypeList", JSON.stringify(res.data));
}
if ("cpys_type" == value) {
sessionStorage.setItem("cpysTypeList", JSON.stringify(res.data));
}
if ("rlzl_type" == value) {
sessionStorage.setItem("rlzlTypeList", JSON.stringify(res.data));
}
if ("industry_type" == value) {
sessionStorage.setItem("industryTypeList", JSON.stringify(res.data));
}
});
},
},
2. 次のように、パブリック パッケージ
jsファイルを作成し、フロントエンド列挙型変換の共通メソッドを記述して、コード テーブル変換を実行します。
export function GetTransformItem(type, code) {
if (!code) {
return "--";
}
var codeList = JSON.parse(sessionStorage.getItem(type));
var item = codeList.filter((o) => {
return o.value.toString() == code.toString();
});
let obj = item[0];
return obj && obj.label ? obj.label : "--";
}
// 接收传入的参数 type [枚举类型] code [枚举值]
export function TransformByCode(type, code) {
console.log(type, code);
let str = "";
switch (type) {
case "car_type":
//车辆类型
str = GetTransformItem("carTypeList", code);
break;
case "pfjd_type":
//排放阶段
str = GetTransformItem("pfjdTypeList", code);
break;
case "cpys_type":
//车牌颜色
str = GetTransformItem("cpysTypeList", code);
break;
case "rlzl_type":
//燃料类型
str = GetTransformItem("rlzlTypeList", code);
break;
case "industry_type":
//行业类别
str = GetTransformItem("industryTypeList", code);
break;
}
return str;
}
3. 利用ページでパッケージファイルを導入し、利用する際のメソッドに
typeと を渡します。codeTransformByCode
3.1 html_
<div>{
{
getLabelByCode("car_type", scope.row.car)}}</div>
3.2 パッケージファイルのインポートenumerate.js
import {
TransformByCode } from "@/utils/enumerate";
3.3methods方法
methods: {
getLabelByCode(type, code) {
return TransformByCode(type, code);
},
},
4. 例 1
<template>
<div>
<el-table :data="tableData">
<el-table-column align="center" type="index" label="序号"></el-table-column>
<el-table-column align="center" prop="car" label="种类">
<template slot-scope="scope">
{
{
getLabelByCode("car_type", scope.row.car)}}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import {
TransformByCode } from "@/utils/enumerate";
export default {
data() {
return {
// 模拟表格数据
tableData: [
{
car: 1,
},
{
car: 2,
},
],
};
},
methods: {
getLabelByCode(type, code) {
return TransformByCode(type, code);
},
},
};
</script>
結果の表示:
5. 例 2
<template>
<div>
<!-- 页面调用方法，并传入类型 -->
<div>
车辆类型：{
{
getLabelByCode("car_type", particulars.carData)}}
</div>
<div>
排放阶段：{
{
getLabelByCode("pfjd_type", particulars.pfjdData)}}
</div>
<div>
车牌颜色：{
{
getLabelByCode("cpys_type", particulars.cpysData)}}
</div>
<div>
燃料类型：{
{
getLabelByCode("rlzl_type", particulars.rllxData)}}
</div>
<div>
行业类别：{
{
getLabelByCode("industry_type", particulars.hylbData)}}
</div>
</div>
</template>
<script>
import {
TransformByCode } from "@/utils/enumerate";
export default {
data() {
return {
// 模拟数据
particulars: {
carData: "1",
pfjdData: "1",
cpysData: "2",
rllxData: "1",
hylbData: null, //模拟非常规返回数据时
},
};
},
methods: {
// 转码操作
getLabelByCode(type, code) {
return TransformByCode(type, code);
},
},
};
</script>
結果の表示:
もちろん、WeChat アプレットのデータ マッチングに興味がある場合は、ブロガーによる別の記事も参照してください。WeChatアプレットは辞書テーブルを介して対応するデータをマッチングします。