el-table-column prop使用三元运算符

最新推荐文章于 2024-11-08 17:07:18 发布

原创最新推荐文章于 2024-11-08 17:07:18 发布 · 632 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章讨论了在ElementUI的el-table-column组件中，如何通过三元运算符来实现动态prop的功能。作者提到之前尝试动态prop的方式未生效，但通过使用模板插槽并结合三元运算符，成功地显示了性别列的内容，根据row.sex的值显示男或女。

原地址：

el-table-column prop使用三元运算符

之前采用动态prop的方式发现不起作用（傻der）

使用模版插槽的时候就不用prop

        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="nickName" label="姓名3" align="center"> </el-table-column>
          <el-table-column prop="formOfEmployment" label="用工性质" align="center">
          </el-table-column>
          <el-table-column  label="性别" width="50px" align="center">
            <template slot-scope="scope">
              {{scope.row.sex == 0 ?'男' :'女'}}
            </template>
          </el-table-column>
        </el-table>