cellStyle使用方法；rowStyle同理，只是接收的参数不同，具体参数看element官网

最新推荐文章于 2024-04-10 02:54:58 发布

美丽先生

最新推荐文章于 2024-04-10 02:54:58 发布

阅读量2.1k

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_43780814/article/details/117825543

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Element UI的`cellStyle`方法来实现表格单元格的样式定制，包括条件判断改变背景色，以及调整高度、宽度和内边距等样式属性。示例代码展示了如何根据行ID和列索引动态设置单元格样式。

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

cellStyle使用方法；rowStyle同理，只是接收的参数不同，具体参数看element官网

methods: {
 cellStyle({row, column, rowIndex, columnIndex}) {
   let styleJson = {
     height: '32px',
     width: '100%',
     padding: '0px !important',
   }     
   if (row.id == '5d75f0ab0f3e197fd15a5c12' && columnIndex == 2) {
     styleJson.backgroundColor = 'red'
   } else {
     styleJson.backgroundColor = '#fff'
   }
   return styleJson  // 返回对象
 },
},

el-table(:data="tableData" border height="228px" :cell-style="cellStyle")
  el-table-column(type="index" label="序号" align="center" width="50px")
  el-table-column(prop="label" label="字段名称" align="center")
  el-table-column(prop="is_require" label="内容是否为必填" align="center")
    template(slot-scope="scope")
      el-checkbox(checked disabled)
  el-table-column(label="快速录入启用" align="center")
    template(slot-scope="scope")
      el-checkbox(disabled)
  el-table-column(label="快速录入设置" align="center" )
    template(slot-scope="scope")
      el-button(type="text" style="color:#d9d9d9;" disabled) 设置
  el-table-column(prop="is_show" label="页面是否显示" align="center")
    template(slot-scope="scope")
      el-checkbox(checked disabled)
  el-table-column(label="是否为日期" align="center")
    template(slot-scope="scope")
      el-checkbox(disabled)
  el-table-column(prop="placeholder" label="字段填写说明" align="center")