优化vue 根据后台反馈状态动态显示相应字段

优化vue 根据后台反馈状态动态显示相应字段

1. 只有两个状态

使用三元运算符

<!-- 未优化版 -->
<template slot="state" slot-scope="state">
  <span v-if="state == 1">已上线</span>
  <span v-if="state == 2">未上线</span>
</template>
<!-- 优化版 -->
<template slot="state" slot-scope="state">
  {{ state == 1 ? '已上线' : '未上线' }}
</template>

2. 多个状态时

<!-- 未优化版 -->
<template slot="state" slot-scope="state">
  <span v-if=" state == 1">已上线</span>
  <span v-if=" state == 2">已下线</span>
  <span v-if=" state == 3">已成功</span>
  <span v-if=" state == 4">已失败</span>
  <span v-if=" state == 5">已购买</span>
  <span v-if=" state == 6">已加购</span>
</template>

• 使用 methods

<!-- 优化版 -->
<template slot="state" slot-scope="state">
  {{stateJudgment(state)}}
</template>

methods: {
  stateJudgment(i){
    switch(i){
      case 1 : return "已上线";
      break
      case 2 : return "已下线";
      break
      case 3 : return "已成功";
      break
      case 4 : return "已失败";
      break
      case 5 : return "已购买";
      break
      case 6 : return "已加购";
      break
    }
  }
},

• 使用 filters

<!-- 优化版 -->
<template slot="state" slot-scope="state">
  {{state | stateJudgment}}
</template>

filters: {
  stateJudgment: (i) => {
    let stateMap = {
      1: "已上线",
      2: "已下线",
      3: "已成功",
      4: "已失败",
      5: "已购买",
      6: "已加购",
    };
    return stateMap[i] || "";
  },
},

3. 需要的选项较多的情况

<template slot="state" slot-scope="state">
  <span :style="{ color: stateJudgment(state)[1] }">{{
    stateJudgment(state)[0]
  }}</span>
</template>

methods: {
  stateJudgment(i) {
    const STATE_MAP_ACTIONS = new Map([
      [1, ["已上线", "red"]],
      [2, ["已下线", "green"]],
      [3, ["已成功", "AntiqueWhite"]],
      [4, ["已失败", "Aqua"]],
      [5, ["已加购", "CadetBlue"]],
      [6, ["已购买", "CornflowerBlue"]],
    ]);
    const result = STATE_MAP_ACTIONS.has(i) && STATE_MAP_ACTIONS.get(i);
    return result;
  },
}

扩展 new Map() 的使用

4. antdv + vue案例

<template>
  <a-table :columns="columns" :data-source="data">
    <template slot="state" slot-scope="state">
      <span :style="{ color: stateJudgment(state)[1] }">{{
        stateJudgment(state)[0]
      }}</span>
    </template>
  </a-table>
</template>
<script>
const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
    width: 80,
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address 1",
    ellipsis: true,
  },
  {
    title: "Long Column Long Column Long Column",
    dataIndex: "address",
    key: "address 2",
    ellipsis: true,
  },
  {
    title: "Long Column Long Column",
    dataIndex: "address",
    key: "address 3",
    ellipsis: true,
  },
  {
    title: "Long Column",
    dataIndex: "address",
    key: "address 4",
    ellipsis: true,
  },
  {
    title: "State",
    dataIndex: "state",
    key: "state 5",
    scopedSlots: { customRender: "state" },
  },
];
const data = [
  {
    key: "1",
    name: "John Brown",
    age: 10,
    address: "New York No. 1 Lake Park, New York No. 1 Lake Park",
    tags: ["nice", "developer"],
    state: 1,
  },
  {
    key: "2",
    name: "Jim Green",
    age: 20,
    address: "London No. 2 Lake Park, London No. 2 Lake Park",
    tags: ["loser"],
    state: 2,
  },
  {
    key: "3",
    name: "Joe Black",
    age: 30,
    address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
    state: 3,
  },
  {
    key: "4",
    name: "Joe Black",
    age: 40,
    address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
    state: 4,
  },
  {
    key: "5",
    name: "Joe Black",
    age: 50,
    address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
    state: 5,
  },
  {
    key: "6",
    name: "Joe Black",
    age: 60,
    address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
    state: 6,
  },
];
export default {
  data() {
    return {
      data,
      columns,
    };
  },
  methods: {
    stateJudgment(i) {
      const STATE_MAP_ACTIONS = new Map([
        [1, ["已上线", "red"]],
        [2, ["已下线", "green"]],
        [3, ["已成功", "AntiqueWhite"]],
        [4, ["已失败", "Aqua"]],
        [5, ["已加购", "CadetBlue"]],
        [6, ["已购买", "CornflowerBlue"]],
      ]);
      const result = STATE_MAP_ACTIONS.has(i) && STATE_MAP_ACTIONS.get(i);
      return result;
    },
  }
};
</script>