Avue根据不同结果，展示不同样式

 

 实现的效果：正常显示蓝色，告警显示红色。也可以加超链接跳转等其他样式

1、在需要设置样式的字段设置插槽，solt:true 

option: {
          height:'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          column: [
            {
              label: "设备状态",
              prop: "deviceStated",
              addDisplay: false,
              editDisabled: true,
              search:true,
              searchSpan:4,
              slot:true,
              rules: [{
                required: true,
                message: "请输入设备状态",
                trigger: "blur"
              }]
            },
            
          ]
        },

2、增加一个<template> </template>设置样式

<avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
 
<template slot-scope="scope" slot="deviceStated">
        <span v-if="scope.row.deviceStated ==='告警'" style="color: red">    
            {{scope.row.deviceStated}}</span>
        <span v-else style="color: #1e9fff" >{{scope.row.deviceStated}}</span>
 </template>

</avue-crud>