Element-ui如何操作table来变更表格内容

企鹅博客
企鹅博客
企鹅博客
28889
文章
0
评论
2020年9月15日18:47:38 评论 4 views 892字阅读2分58秒

这次给大家带来Element-ui如何操作table来变更表格内容,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 ? '女' : '未知';
  },
}

相信看了本文案例你已经掌握了方法,更多精彩请关注php教程其它相关文章!

推荐阅读:

element UI怎么导出Excel

vue-dplayer实现hls播放的步奏详解

以上就是Element-ui如何操作table来变更表格内容的详细内容,更多请关注php教程其它相关文章!

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
分享一个React的实践项目 js教程

分享一个React的实践项目

上回说到用React写了一个带Header的首页,我们这次实践就使用Redux进行状态管理 Rudex 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。惟一改变 sta...
history的几种方法 js教程

history的几种方法

history 对象保存着用户上网的浏览记录,从窗口被打开的时刻算起 history.go(num); num 可以取值正负整数,负数表示向后跳转 ( 后退 ) ,正数表示向前跳转 ( 前进 ) ,n...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: