element 动态添加表头

最新推荐文章于 2024-04-15 09:48:23 发布

Hero_rong

最新推荐文章于 2024-04-15 09:48:23 发布

阅读量950

点赞数 1

CC 4.0 BY-SA版权

分类专栏： element js vue

本文链接：https://blog.youkuaiyun.com/Hero_rong/article/details/103369790

vue 同时被 3 个专栏收录

53 篇文章

订阅专栏

48 篇文章

订阅专栏

element

10 篇文章

订阅专栏

在Element UI中，遇到后台返回的用户状态为0和1，需要分别显示为启用和禁用。通过官方文档，了解到不能直接使用prop绑定数据，因为这样会显示原始的0和1。解决方案是利用slot-scope属性，它允许我们访问row, column, $index和store等数据，从而实现根据状态值定制显示内容。具体实现方法可参考Element UI的官方文档。" 124130728,13121146,使用session实现的购物车应用,"['Java', 'JavaScript', 'Eclipse']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用户状态后台返回给我的是 0 和 1，根据 0 和 1 来显示，启用和禁用，但是文档上的例子是直接用 prop = ' userName ' 这种方法来显示数据的，如果还是这么写的话，那表格里展示出来的就是 0 和 1 ，这并不符合我的需求，

所以，我找到了这个属性 slot-scope ，这个属性，看下面打印的东西，就知道他是个啥了，

通过 slot-scope 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考官方

<el-table :data="userList" border>
  <el-table-column prop="userName" label="用户名"/>
  <el-table-column prop="roleName" label="角色"/>
  <el-table-column prop="groupName" label="所属机构"/>
  <el-table-column prop="schoolName" label="所属学校"/>
  <el-table-column prop="userName" label="真实姓名"/>
  <el-table-column prop="userTel" label="联系方式"/>
  <el-table-column prop="isValid" label="用户状态">
    <template slot-scope="scopee">{{scopee.row.isValid == 0 ? '启用' : '禁用'}}</template>
  </el-table-column>
  <el-table-column prop="unit" label="操作" :width='minWidth'>
    <template slot-scope="scope">
      <el-button size="mini" type="primary" @click="handleSee(scope.$index, scope.row)">个人信息</el-button>
      <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      <el-button size="mini" type="warning" @click="handleStop(scope.$index, scope.row)">{{scope.row.isValid==0?'启用':'禁用'}}</el-button>
      <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>