slot是插槽,slot-scope=“scope“语义更加明确,相当于一行的数据,在实际开发中会碰到如下的场景,

这个工作状态是变化的,而我们就可以通过后端返回的具体值来判断这里应该显示什么样的内容,具体代码如下

    <el-table-column label="工单状态" prop="status">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.status == "0"
                ? "待办"
                : scope.row.status == "1"
                ? "处置中"
                : "完成"
            }}</span>
          </template>
        </el-table-column>

后端返回消息如下status状态值为0就是代办,为1就是处置,为2就是完成

此外这里每行还有编辑,删除等功能,事件处理函数中的参数,scope.$index就是该行的下标,scope.row就是该行的数据所有消息对象,有了这两个参数我们就可以实现编辑(分配,转派,完工),删除功能,所以这个 slot-scope="scope"是非常重要的

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐