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;'
      }
    },
相关推荐
一洽客服系统5 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead19 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
爱编程的喵2 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6222 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
唐叔在学习2 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr2 小时前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js
元气小嘉2 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能