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;'
      }
    },
相关推荐
daols881 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴5 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust5 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放5 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝6 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele7 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试