Home  >  Article  >  Web Front-end  >  How to use the table in Element-ui to implement filter conditions and change the table content

How to use the table in Element-ui to implement filter conditions and change the table content

亚连
亚连Original
2018-06-02 09:41:024831browse

Below I will share with you a method for changing the filter conditions in the Element-ui table. It has a good reference value and I hope it will be helpful to everyone.

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>

In js:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Found problems related to custom instructions in Vue.directive

Detailed explanation of JavaScript image processing and synthesis technology (Detailed tutorial)

How to implement the back force refresh function on WeChat web side (Detailed tutorial)

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

Statement:
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