element 动态添加表头

今天药忘吃喽~ 2023-06-19 01:56 12阅读 0赞

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

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

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

![20191203170531181.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

[Link 1]: https://element.eleme.cn/#/zh-CN/component/table
[20191203170531181.png]: https://img-blog.csdnimg.cn/20191203170531181.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191203170355576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191203164811195.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70