vue3，样式行内三元表达式，2022/6/10am

xumengxia—xu

已于 2022-08-08 08:49:02 修改

阅读量2k

点赞数

分类专栏：工作2022年5月，记录生活的每一天 GIT 文章标签： elementui vue.js javascript

于 2022-06-10 12:18:09 首次发布

本文链接：https://blog.csdn.net/qq_56514785/article/details/125219299

版权

工作2022年5月，记录生活的每一天同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

GIT

6 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何在前端开发中使用`<el-table>`组件进行数据展示，并展示了如何结合`el-switch`进行状态切换及动态颜色配置。通过模板语法实现单元格内容的复杂布局，包括颜色盒子和文字描述。同时，还提到了动态类名和样式绑定，例如根据条件改变元素边框。这涉及到了Vue.js的条件渲染和属性绑定等核心概念。

摘要由CSDN通过智能技术生成

<el-table
 height="760"
 :data="productTreeTable"
 style="width: 100%;"
 row-key="id"
 :default-expand-all="false"

>
 <el-table-column prop="name" label="Item Description" width="300" >
   <!-- 有颜色 colorNo: "DDD5C7" -->
   <template  #default="scope">
     <div style="display: flex;align-items: center;">
      <el-switch :disabled="rowList.status == '1' ? true  : false" v-model="rowList.status"  />
       <div v-if="scope.row.colorNo" class="colorbox" :style="{'background-color':'#' + 
       scope.row.colorNo}"></div>
       <span>{{scope.row.name}}</span>
     </div>
   </template>
</el-table-column>
</el-table>






:disabled = 'swichval === false ? true :false'
 // 使用变量和 字符串拼接
 <span :class="item.meta.ishowiconActive == true ? 'iconfont' + item.meta.iconActive : 'iconfont' + item.meta.icon"></span>


:style="{'border-bottom':isActive === item.id ? '4px solid #000' : 'none'}"