简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

How Element-ui operates table to change table content

php中世界最好的语言
Release： 2018-04-12 14:29:29
Original
5229 people have browsed it

This time I will show you how Element-ui operates the table to change the table content, and how Element-ui operates the table to change the table content. Precautions What are they? The following is a practical case. Let’s take a look.

In component:

<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>
Copy after login

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 ? '女' : '未知';
  },
}
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese website Other related articles!

Recommended reading:

element UI How to export Excel

vue-dplayer Detailed explanation of the steps to implement hls playback

The above is the detailed content of How Element-ui operates table to change table content. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
element-ui table change
source：php.cn
Previous article：How to export Excel from element UI Next article：How to add audio files in vue
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Encountered error: A problem occurred while executing npm install && npm run dev - Vite - Laravel UI React Hi everyone, today I encountered a problem, when I installed laravelui using react and pas...
From 2023-11-10 17:43:07
0
1
278
Best way to track and iterate over tabs and windows using WindowHandles using Selenium We are working with Seleniumwebdriver for UI testing for Internet Explorer11. In the teste...
From 2023-11-04 18:03:14
0
1
199
Module '/node_modules/.vite/deps/vue.js' does not export a default named 'default' as required. Below are my questions. I packaged my project in library mode via vite. Whenever my librar...
From 2023-10-22 13:37:29
0
1
263
How to apply transparency to CSS color variables? I'm designing an app using Electron so I can access CSS variables. I have a color variable...
From 2023-10-13 15:48:04
0
1
302
How to apply opacity on CSS color variable? I'm designing an app using Electron so I can access CSS variables. I have a color variable...
From 2023-10-13 14:43:49
0
1
329
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！