您现在的位置是：首页 >学无止境 >elementplus+vue实现选择不同的状态同时切换颜色网站首页学无止境

elementplus+vue实现选择不同的状态同时切换颜色

函数

statusText(status) {
      const statusMap = {
        active: '激活',
        inactive: '禁用',
        executing: '执行中',
        paused: '暂停',
        stopped: '停止'
      };
      return statusMap[status] || status;
    },
    statusColor(status) {
      const colorMap = {
        active: 'green',
        inactive: 'red',
        executing: 'blue',
        paused: 'orange',
        stopped: 'gray'
      };
      return colorMap[status] || 'black';
    }

template中的element组件代码

<el-table-column label="状态" align="center">
  <template slot-scope="scope">
    <span :style="{ color: statusColor(scope.row.status) }">
      {{ statusText(scope.row.status) }}
    </span>
  </template>
</el-table-column>