当前位置: 首页 > article >正文

element(vue2)表格插槽

#default="{row}"形式

#:是v-solt的缩写

default:是内容的意思

也可以用

        #default="scope"

        scope.row.属性

        这里的scope里边有很多属性可以获取rowIndex,只是获取内容可以{row}

                        
原文链接:https://blog.csdn.net/weixin_53641562/article/details/124066501

方法1 

<el-table :data="records_data" height="250" border style="width: 100%" :header-cell-style="tableHeaderColor">
        //多层级表头
      <el-table-column label="进出记录" align="center">
        <el-table-column type="index" width="180" label="序号"> </el-table-column>
        <el-table-column prop="intime" label="时间"> </el-table-column>
        //插槽
        <el-table-column prop="type" label="状态" width="180">
          <template #default="{ row }"> {{ row.type == 0 ? '入场' : '离场' }} </template>
        </el-table-column>
      </el-table-column>
    </el-table>




//js
    //根据不同条件设置表头样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex)
      if (rowIndex === 0) {
        return 'background-color: #F5F7FA; color:#3E3F41;'
      } else {
        return 'color:#3E3F41; background: #ffffff;'
      }
    },

 方法2

<el-table :data="records_data" height="250" border style="width: 100%" :header-cell-style="tableHeaderColor">
      <el-table-column label="进出记录" align="center">
        <el-table-column type="index" width="180" label="序号"> </el-table-column>
        <el-table-column prop="intime" label="时间"> </el-table-column>
        <el-table-column prop="type" label="状态" width="180">
            <template slot-scope="scope">
              {{ scope.row.type == 0 ? '入场' : '离场' }}
            </template>
        </el-table-column>
      </el-table-column>
    </el-table>


//js
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex)
      if (rowIndex === 0) {
        return 'background-color: #F5F7FA; color:#3E3F41;'
      } else {
        return 'color:#3E3F41; background: #ffffff;'
      }
    },

 


http://www.kler.cn/a/474227.html

相关文章:

  • 开放词汇检测新晋SOTA:地瓜机器人开源DOSOD实时检测算法
  • spring boot 集成 knife4j
  • WandB使用笔记
  • 用OpenCV实现UVC视频分屏
  • 2024AAAI SCTNet论文阅读笔记
  • 计算机网络与服务器
  • 第十一届蓝桥杯Scratch05月stema选拔赛真题—报数游戏
  • 滑动窗口——串联所有单词的子串
  • Linux好用软件
  • C++ 入门第26天:文件与流操作基础
  • 记录一次MySQL:caching_sha2_password报错
  • Linux中增加swap分区
  • 比QT更高效的一款开源嵌入式图形工具EGT-Ensemble Graphics Toolkit
  • 【gRPC】对称与非对称加解密和单向TLS与双向TLS讲解与go案例
  • vue 点击按钮复制文本功能(同时解决http不安全问题)
  • c# readonly 和 const的区别和使用场景
  • Android配件应用默认启动与USB权限申请区别
  • CODESYS MODBUS TCP通信(禾川Q1 PLC作为MODBUS TCP从站)
  • 【mysql】流程控制
  • 【前端,TypeScript】TypeScript速成(八):Promise
  • 机器学习的组成
  • PDFMathTranslate: Star13.8k,一款基于AI的PDF文档全文双语翻译PDF文档全文双语翻译,保留格式神器,你应该需要它
  • R语言的语法
  • 《鸿蒙系统AI技术:筑牢复杂网络环境下的安全防线》
  • 模型评估指标总结(预测指标、分类指标、回归指标)
  • 【开源免费】基于Vue和SpringBoot的贸易行业crm系统(附论文)