2021-12-6 关于vue中axios访问到的数据打印在elementUI中tableData里面,进行三元运算 访问性别sex0 1 2 转换为女 男 未知的方法, prop中的数据进行三元运算

代码如下 三元运算

 <el-table-column prop="sex" label="性别">
        <template #default="scope">
          <span>{{scope.row.sex== 0 ? '女' :scope.row.sex== 1 ? '男':'未知'}}</span>
        </template>
      </el-table-column>

解决如下

不知道怎么用的看我下面的教程

在vue中访问后台数据请求的时候,通常会在User表中定义sex为Integer类型

但是sex为0 1 2 来表示 女 男 未知

这个时候怎么在vue前端中转换为 女 男 未知

踩坑解决方法

我的数据库中的sex类型都为Integer类型,并且已经定义好了数据

再看我的vue访问代码

当点击查询按钮时,会对后台进行查询数据 并且在ui界面中的tableData渲染

UserController中就不演示了
现在来看访问到的结果

//sex表示字段名
<el-table-column prop="sex" label="性别">
        <template #default="scope">
        获取scope.row.sex的数据 判定如果为0则输出'女',为1就输出'男',其他就输出'未知'
          <span>{{scope.row.sex== 0 ? '女' :scope.row.sex== 1 ? '男':'未知'}}</span>
        </template>
      </el-table-column>

踩坑找了半个小时,记录一下

放上我的代码供参考

 <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        sortable
        width="60"
      ></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="account" label="账号" sortable></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      
      <el-table-column prop="sex" label="性别">
        <template #default="scope">
          <span>{{scope.row.sex== 0 ? '女' :scope.row.sex== 1 ? '男':'未知'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <!-- 加上@confirm 只有在确认被点击时才执行 -->
          <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button size="mini" type="danger" >删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>