在使用 VUE + Element-UI 开发项目的时候，遇到了这样一个需求：
在使用el-table表格渲染数据的时候，有一个“状态”列和一个“动作”列。
当后端传递给我们当前行的status = 1的时候，状态列文字为可用（绿色），中间按钮显示为“过期”；
当status = 2的时候状态列文字为禁用（红色），中间按钮显示为“生效”，且“编辑”和“删除”按钮为禁用状态。
并且，需要在点击中间按钮的时候，在这两种状态之间进行切换。
实现思路：
用el-table-column循环渲染数据时，不要将状态列和动作列循环进去；将状态列单独抽离出来，写在倒数第二列，动作列写在倒数第一列通过<template slot-scope="scope">获取到当前行的值，在状态列中，放置一个 div，并且给 div 动态绑定一个 style 属性：:style="{ color: scope.row.status =='1' ? 'green' : 'red' }"；再通过插值语法，在 div 根据 status 的值来判断显示可用还是禁用：{{ scope.row.status== '1' ? '可用' : '禁用' }}，这样，状态列就完成了对于动作列来说，也是通过<template slot-scope="scope">获取到当前行的值，然后通过 el-button 的:disabled属性，动态绑定一个三元表达式来判断编辑和删除是否禁用：:disabled="scope.row.status == '1' ? false : true"，过期和生效的动态切换也是同理。
完整HTML代码
<template v-for="item in listTitle"><el-table-column:key="item.key":column-key="item.prop":prop="item.prop":label="item.label":width="item.width"/></template><el-table-columnlabel="状态"><template slot-scope="scope"><div :style="{ color: scope.row.status =='1' ? 'green' : 'red' }">{{ scope.row.status== '1' ? '可用' : '禁用' }}</div></template></el-table-column><el-table-columnlabel="动作"><template slot-scope="scope"><el-button-group><el-button :disabled="scope.row.status == '1' ? false : true">编辑</el-button><el-button @click="rowOverdue(scope.row)">{{ scope.row.status == '1' ? '过期' : '生效' }}</el-button><el-button :disabled="scope.row.status == '1' ? false : true">删除</el-button></el-button-group></template></el-table-column>
点击 “过期” / “生效” 触发的函数代码
这里需要根据每个人自己的不同需求来进行书写，我只贴了我自己的部分代码
rowOverdue：点击中间按钮触发的函数
overDueForm：后端需要你传递过去的值
overdue：后端提供的改变 status 值的接口
rowOverdue(row) {let overDueForm = {id: row.id,status: row.status}// 改变 status 值的接口overdue(overDueForm).then(res => {****})},
总结：
本质上都是通过<template slot-scope="scope">来获取到当前行的值，然后再利用三元表达式来进行判断，根据需求显示不同的东西。
关于 Element-UI 按钮组（el-button-group）实现点击其中一个按钮 禁用其它按钮 以及改变状态列的文字和颜色的实现方式
