vue中关于多状态渲染列表数据

小手冰凉_sos

已于 2022-03-31 16:46:44 修改

阅读量939

点赞数

文章标签： vue elementui javascript es6

于 2022-03-31 16:45:50 首次发布

本文链接：https://blog.csdn.net/qq_41485537/article/details/123876640

版权

在utils文件里面根据后端返回的枚举值进行定义

export const PROGRESS = {
    PENDING: 0, // 待处理
    TO_BE_SENT: 1, // 待发送
    SENDING: 2, // 传输中
    SUCCESS: 3, // 已发送
    CANCELED: 4, // 已取消
    PAUSED: 5, // 已暂停
    FAILED: 6, // 失败
};

*根据业务设置属性*
export const PROGRESS_CONFIG = {
    [PROGRESS.PENDING]: {
      cn: '待处理',
      color: '#7373B9',
      type: 'info',
      margin: '16'
    },
    [PROGRESS.TO_BE_SENT]: {
      cn: '待发送',
      color: '#67C23A',
      type: 'success',
      margin: '8'
    },
    [PROGRESS.SENDING]: {
      cn: '传输中',
      color: '#409EFF',
      type: 'primary',
      margin: '8'
    },
    [PROGRESS.SUCCESS]: {
      cn: '已发送',
      color: '#E6A23C',
      type: 'warning',
      margin: '8'
    },
    [PROGRESS.CANCELED]: {
      cn: '已取消',
      color: '#000000',
      type: 'warning',
      margin: '8'
     },
    [PROGRESS.PAUSED]: {
      cn: '已暂停',
      color: '#909399',
      type: 'warning',
      margin: '8'
    },
    [PROGRESS.FAILED]: {
      cn: '失败',
      color: '#E2383B',
      type: 'danger',
      margin: '16'
    },
};

使用示例

<el-table-column label="状态" prop="taskState" width="100" align="center">
    <template #default="scope">
              <span v-show="[PROGRESS.PENDING,PROGRESS.TO_BE_SENT,PROGRESS.SENDING,
                PROGRESS.CANCELED,PROGRESS.PAUSED].includes(scope.row.taskState)"
                :style="[{ color: PROGRESS_CONFIG[scope.row.taskState].color }]"
              >
                {{PROGRESS_CONFIG[scope.row.taskState].cn}}
              </span>
              <el-popover
                placement="right"
                :width="280"
                trigger="hover"
                :content="scope.row.taskResult"
              >
                <template #reference>
                  <span v-show="[PROGRESS.FAILED].includes(scope.row.taskState)"
                    :style="[{ color: PROGRESS_CONFIG[scope.row.taskState].color }]"
                  >
                    {{PROGRESS_CONFIG[scope.row.taskState].cn}}
                  </span>
                </template>
              </el-popover>
     </template>
</el-table-column>

import { OPERATE, OPERATE_CONFIG } from '@/utils/index';
return {
        OPERATE,
        OPERATE_CONFIG
        ...

优化写法

<el-table-column label="操作类型" prop="operationType" align="center">
            <template #default="scope">
              <span
                v-show="scope.row && scope.row.operationType && [OPERATE.APPEND, OPERATE.REPLACE, OPERATE.DELETE].includes(scope.row.operationType)"
                :style="[{ color: operateConfig(scope.row.operationType, 'color') }]">
                {{operateConfig(scope.row.operationType, 'cn')}}
              </span>
            </template>
</el-table-column>

function operateConfig(operationType: string, propName: 'cn'|'color') {
      return operationType && propName ? OPERATE_CONFIG[operationType][propName] : "-";
 }