zoukankan      html  css  js  c++  java
  • el-table加背景色

    <template>
      <div id="app">
        <el-table
          :data="tableData"
          border
          :header-cell-style="{
            background: '#fafafa',
            color: '#333',
            fontWeight: '600',
            fontSize: '14px',
          }"
          style=" 541px"
          :row-style="TableRowStyle"
        >
          <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
          <el-table-column prop="age" label="年龄" width="180"> </el-table-column>
          <el-table-column prop="school" label="是否上学" width="180"> </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    export default {
      name: "app",
      data() {
        return {
          tableData: [
            {
              name: "孙悟空",
              age: 500,
              school: "上学中",
            },
            {
              name: "猪八戒",
              age: 88,
              school: "已辍学",
            },
            {
              name: "沙僧",
              age: 1000,
              school: "已辍学",
            },
            {
              name: "唐僧",
              age: 99999,
              school: "上学中",
            },
          ],
        };
      },
      methods: {
        // 当状态为 已辍学 的状态,加上背景色
        TableRowStyle({ row, rowIndex }) {
          // 注意,这里返回的是一个对象
          let rowBackground = {};
          if (row.school.includes("辍学") ) {
            rowBackground.background = "pink";
            return rowBackground;
          }
        },
      },
    };
    </script>

    还有

    cell-style的设置举例
    <el-table :data="auditList" border highlight-current-row style=" 100%" :cell-style="addClass">
    ...
    </el-teble>
    addClass({row,column,rowIndex,columnIndex}) {
    var bgColor = '';
    if(columnIndex == 2) {
    if(row.kkk == 'Yes') {
     return 'background:#baecc6';
    }
    }



  • 相关阅读:
    final和finally的区别
    ArrayList和LinkedList的区别
    collection和collections的区别
    第三次作业
    第二次作业
    第零次作业
    最后一次作业-- 总结报告
    第14、15教学周作业
    GridView去掉边框! 【转载于:http://magicpeng99.blog.sohu.com/】
    ASP.NET支持用Menu显示web.sitemap中定义好的网站链接 【转载】
  • 原文地址:https://www.cnblogs.com/xiaoliu66007/p/15050123.html
Copyright © 2011-2022 走看看