Vue+ElementUI动态显示el-table某列（值和颜色）的方法

2022-08-10 16:33:33 阅读：157 来源： 互联网

标签：status 动态显示 Vue el data 离线故障 type row

方法一：结合 template scope组件和 v-if 语法判断
例1：值

<el-table-column prop="status" label="车辆状态">
  <template scope="scope">
    <span v-if="scope.row.status=== 1">在线</span>
    <span v-else-if="scope.row.status=== 0">离线</span>
  </template>
</el-table-column>

例2：值和颜色

<el-table-column prop="breakdownGrade" label="故障等级">
     <template scope="scope">
         <span v-if="scope.row.breakdownGrade=== '0'" style="color: #909399">轻微故障(一级)</span>
         <span v-else-if="scope.row.breakdownGrade=== '1'" style="color: #e6a23c">⼀般故障(⼆级)</span>
         <span v-else-if="scope.row.breakdownGrade=== '2'" style="color: #f56c6c ">严重故障(三级)</span>
     </template>
</el-table-column>

方法二：使用 Element-ui formatter属性 v-bind 绑定

<el-table-column 
  prop="status"
  align='center'
  label="车辆状态"
  :formatter="formatStatus">
</el-table-column>

formatStatus(row, column) {
  return row.status == '0' ? '在线' : '离线'
}

方法三：在 data 对象中绑定属性并结合 el-tag 标签

在 data 中定义相关值

data () {
  return {
    carStatus: {
      'used': { 'status': '使用中', 'type': 'primary' },
      'noused': { 'status': '未使用', 'type': 'info' },
      'broken': { 'status': '故障', 'type': 'danger' },
      'trash': { 'status': '废弃', 'type': 'warning' }
    }
  }
}

在 template 中使用

<el-table-column prop='status' label='车辆使用状态'>
  <template slot-scope="scope">
    <div slot="reference" class="carUsedCondition">
      <el-tag :type="carStatus[scope.row.status].type">
        {{carStatus[scope.row.status].status}}
      </el-tag>
    </div>
  </template>
</el-table-column>

新手学习，如有不妥之处，欢迎指正！

标签：status,动态显示,Vue,el,data,离线,故障,type,row
来源： https://www.cnblogs.com/arek/p/16572726.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue+ElementUI动态显示el-table某列（值和颜色）的方法