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数据

<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>