element ui table 表格slot插槽整理-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui table 表格slot插槽整理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、scope.row.字段名获取指定行中指定字段名的数据

以oid为例编辑删除操作时需要向后端传oid这个字段

<el-table :data="studyListAll">
          <el-table-column align="center" label="序号" prop="oid"></el-table-column>
          <el-table-column align="center" label="名称" prop="stName"></el-table-column>
          <el-table-column align="center" label="描述" prop="stPlan"></el-table-column>
          <el-table-column align="center" label="推送用户" :formatter="formatterUser">
          </el-table-column>
          <el-table-column align="center" label="打卡频次" prop='stSignFrequency' :formatter="formatterFrequency"></el-table-column>
          <el-table-column align="center" label="开始时间" prop="stStartTime"></el-table-column>
          <el-table-column align="center" label="结束时间" prop="stEndTime"></el-table-column>
          <el-table-column align="center" label="完成情况">
            <template slot-scope="scope">
              <el-button type="text" @click="lookDetail(scope.row.oid)">查看详情</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否隐藏" prop="tstatus">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.tstatus"
                :active-value="1"
                :inactive-value="0"
                @change="val=>{changeTstatus(val,scope.row.oid)}">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="createdTime"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row.oid)">编辑</el-button>
              <el-button type="text" class="btn-red" @click="del(scope.row.oid)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

2、scope.column.字段名

获取列数据

3、scope.$index 获取当前行的下标

以之前打卡后台管理的项目为例子后台返回的数据中包含detail这个字段字段为json字符串

需要根据当前行下标去外层数据取它的detail数据文章来源地址https://www.toymoban.com/news/detail-597739.html

<el-table :data="detailTable">
          <!-- <el-table-column align="center" label="学校" prop="schoolName"></el-table-column> -->
          <el-table-column align="left" label="年级" prop="gradName" width="100"></el-table-column>
          <el-table-column align="left" label="学生姓名" prop="stuName" width="100"></el-table-column>
          <el-table-column label="打卡数据详情">
            <template slot-scope="scope">
              <el-table :data="JSON.parse(detailTable[scope.$index].detail)" :row-class-name="innerClass">
                <el-table-column
                  v-for="(item,index) in JSON.parse(detailTable[scope.$index].detail)"
                  :key="index"
                  :label="item.day"
                  align="center"
                  width="100">
                  <template>
                    <!-- <span>{{scope.$index}}</span> -->
                    <span v-bind:style="{color:item.isSign===0?'red':'green'}">{{item.isSign===0?'未打卡':'已打卡'}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
        </el-table>

到了这里，关于element ui table 表格slot插槽整理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！