elementplus表格根据不同放回值显示不同内容和颜色

效果

 template

            <el-table-column  label="状态" width="200">
                <template #default="scope">
                    <div v-if="scope.row.style">在线</div>
                    <div v-else>离线</div>
                </template>
            </el-table-column>

script

 const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
        // 状态列字体颜色
        // columnIndex 列下标
        // rowIndex 行下标
        // row 行
        // column 列
      if (row.style == true && columnIndex === 3) {
            return { color: "#1CD66C" };
        } else if(row.style == false && columnIndex === 3) {
            return { color: "#ccc" };
        }
    }

方法二：直接在标签上写样式

            <el-table-column label="录像" width="52" align="center">
                <template #default="scope">
                    <div v-if="scope.row.style" style="color: #1CD66C" >启用</div>
                    <div v-else style="color: #ccc">暂停</div>
                </template>
            </el-table-column>