Element-ui table中过滤条件变更表格内容的方法

更新时间：2018年03月02日 09:39:48 作者：你蠢哭我咯

下面小编就为大家分享一篇Element-ui table中过滤条件变更表格内容的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

组件中：

<el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;">
  <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
  </el-table-column>
  <el-table-column prop="cz" label="操作" width="320">
     <template scope="scope">
       <el-button size="small" 
         @click="handleEdit(scope.$index, scope.row)">编辑
       </el-button>
       <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
         {{scope.row.status | formatStatus}}
       </el-button>
     </template>
   </el-table-column>
</el-table>

js中：

filters: {
   formatStatus: function (val) {
    console.log(val)
    return val == 1 ? '上架' : val == 2 ? '下架' : '未知';
  },
},
methods: {
//性别显示转换
  formatSex: function (row, column) {
    return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
  },
}

以上这篇Element-ui table中过滤条件变更表格内容的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue2父子组件传值举例详解
这篇文章主要给大家介绍了关于Vue2父子组件传值的相关资料,Vue 2.0 中父子组件之间的传值可以通过属性(prop)和事件(event)实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
Vue实战之项目开发时常见的几个错误汇总
vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,下面这篇文章主要给大家介绍了关于Vue实战之项目开发时常见的几个错误汇总的相关资料,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
2023-03-03
vue项目部署上线遇到的问题及解决方法
这篇文章主要介绍了vue项目部署上线遇到的问题及解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2018-06-06
Vue渲染函数详解
下面小编就为大家带来一篇Vue渲染函数详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue el-input设置必填提示功能(单个与多个)
有的功能需要设置必填项,当然也需要判断是不是添上了,下面这篇文章主要给大家介绍了关于vue el-input设置必填提示功能(单个与多个)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
在Uni中使用Vue的EventBus总线机制操作
这篇文章主要介绍了在Uni中使用Vue的EventBus总线机制操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vant(ZanUi)结合async-validator实现表单验证的方法
这篇文章主要介绍了vant(ZanUi)结合async-validator实现表单验证的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
vue中使用svg-icon遇到的坑及解决
这篇文章主要介绍了vue中使用svg-icon遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
3种vue路由传参的基本模式
这篇文章主要为大家详细介绍了vue路由传参的3种基本模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-02-02
在 Vue 中编写 SVG 图标组件的方法
这篇文章主要介绍了在 Vue 中编写 SVG 图标组件的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-02-02