Vue + ElementUI 动态显示表格某个单元格：值和颜色

方法一：直接在template scope 使用v-if判断<el-table-column prop="status" label="显示状态"><template scope="scope"><span v-if="sc...

chenmi8205

5559人浏览 · 2018-11-07 11:04:00

chenmi8205 · 2018-11-07 11:04:00 发布

方法一：直接在template scope 使用v-if判断

<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>

方法二：element-ui formatter

1. el-table-column 绑定formatter属性

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

2. 定义绑定的方法

formatStatus(row, column) {
  return row.status == 'Y' ? '已执行' : '未执行'
},

方法三：在data对象中静态绑定属性

1. 在data中定义相关值

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

2. 在template中使用

<el-table-column prop='status' label='状态'>
  <template slot-scope="scope">
    <div slot="reference" class="name-wrapper" style="text-align: center">
      <el-tag :type="ASSET_STATUS[scope.row.status].type">
        {{ASSET_STATUS[scope.row.status].status}}
      </el-tag>
    </div>
  </template>
</el-table-column>

！！！！可以使用element ui 的 e-tag标签来显示不同的背景颜色！

转载于:https://my.oschina.net/u/264284/blog/2872831

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^