表格数据——性别的添加和查询_el-table-column 性别-CSDN博客

本文链接：https://blog.csdn.net/Connie_wuxx/article/details/137019827

文章讲述了在数据添加和查询过程中，由于性别选择文本label的值与表格数据中的实际存储值不一致导致的问题。提供了两种解决方案，一是使用文本插值和三元条件运算符进行动态显示，二是通过if判断和map操作转换数据前后保持一致。

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

问题描述：

添加数据时，性别选择“男”，表格数据性别显示“man”

原因分析：

添加数据时，性别选择文本label=“男”，它的值value=‘man’，所以表格数据sex=“man”

查询数据时，性别选择文本label=“男”，它的值value=‘man’，添加数据经过处理后，表格数据sex=‘男’，无法匹配到查询条件

解决方案1：

添加：文本插值+三元条件运算符，如果表格数据属性sex=“man”，显示‘男’，否则显示‘女’
<el-table-column prop="sex" label="性别">
        <template slot-scope="scope">{{ scope.row.sex === "man" ? '男' : '女'}}</template> 
</el-table-column>
查询：运用三元条件运算符，转换查询条件的值。
 this.formInline.sex === "man" ? '男' : '女'
 this.tableData = this.allData.filter(item => {
       if (item.sex === this.formInline.sex) {
              return true
      }

解决方案2：

添加：运用if判断，map数据，将sex的值转换成“男”、“女”

this.tableData.unshift(this.addForm)
this.tableData = this.tableData.map(item => {
            if (item.sex === 'man') {
              item.sex = '男'
            } else if (item.sex === 'woman') {
              item.sex = '女'
            }
            return item
          })

查询：运用 if判断，将查询条件sex的值转换成“男”、“女”

if(this.formInline.sex === 'man') {
              this.formInline.sex = '男'
            } else if(this.formInline.sex === 'woman') {
              this.formInline.sex = '女'
            }
          this.tableData = this.allData.filter( item => {
            if(item.sex ===  this.formInline.sex) {
              return true
          }
        })