elementui表格false显示是
时间: 2023-10-26 19:26:51 浏览: 107
要在 ElementUI 表格中将某些数据列设置为不显示,需要在表格中的 `columns` 属性中将对应列的 `visible` 属性设置为 `false`,如下所示:
```html
<el-table :data="tableData" :columns="tableColumns">
</el-table>
```
```javascript
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
],
tableColumns: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄', visible: false },
{ prop: 'gender', label: '性别' }
]
}
}
```
在上面的示例中,`tableColumns` 数组中的第二个元素的 `visible` 属性被设置为 `false`,因此在表格中不会显示该列数据。
相关问题
elementui表格后台传入值为false,前端显示“否”
如果在 ElementUI 表格中,后台传入的值为 `false`,但是前端需要显示为“否”的话,可以使用 `formatter` 来进行格式化。在 `columns` 中设置 `formatter` 属性,将 `false` 转换为“否”即可,示例如下:
```html
<el-table :data="tableData" :columns="tableColumns">
</el-table>
```
```javascript
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: false },
{ name: '李四', age: 20, gender: true },
{ name: '王五', age: 22, gender: true }
],
tableColumns: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
{ prop: 'gender', label: '性别', formatter: row => row.gender ? '是' : '否' }
]
}
}
```
在上面的示例中,`tableColumns` 数组中的第三个元素的 `formatter` 属性被设置为一个函数,该函数接收当前行数据 `row` 作为参数,根据 `row.gender` 的值返回“是”或“否”,从而将 `false` 转换为“否”。
elementui 表格筛选
elementUI表格筛选功能可以通过使用filter-method属性来实现。你可以在el-table-column组件中设置filter-method方法,该方法接收两个参数,一个是value,表示当前筛选的值,另一个是row,表示当前行的数据。在这个方法中,你可以根据需要对数据进行筛选,然后返回true或false来决定是否显示该行数据。下面是一个示例代码:
```html
<el-table-column label="医生类别" width="110" :filter-method="filterMethod">
<template slot-scope="{ row }">
{{ row.type }}
</template>
</el-table-column>
```
```javascript
filterMethod(value, row) {
// 在这里进行筛选逻辑,判断value是否与row.type匹配
// 返回true表示显示该行数据,返回false表示不显示该行数据
}
```
在filterMethod方法中,你可以根据value和row来自定义筛选逻辑。如果value与row.type匹配,则返回true,否则返回false。通过自定义filterMethod方法,你可以实现根据关键字来筛选表格数据的功能。
阅读全文