虽然给定引用未直接涉及
Vue2
+ Element中
el - table通过筛选
显示列表列的纯前端
实现详细步骤，但可以结合
Element UI和
Vue2的常规
使用方法给出以下步骤：
### 1. 创建
Vue项目并引入
Element UI
确保已经安装了
Vue CLI，
使用以下命令创建一个新的
Vue项目：
```bash
vue create my
- project
cd my
- project
```
安装
Element UI：
```bash
npm install
element-ui
-S
```
在`main.js`中引入
Element UI：
```javascript
import
Vue from '
vue';
import
ElementUI from '
element-ui';
import '
element-ui/lib/theme
-chalk/index.css';
import App from './App.
vue';
Vue.use(
ElementUI);
new
Vue({
render: h => h(App),
}).$mount('#app');
```
### 2. 在
组件中
使用el - table
在`App.
vue`或者其他
组件中
使用`
el - table`，示例代码如下：
```
vue
<template>
<div>
<
el-table :data="
tableData" style="width: 100%">
<
el-table-column prop="date" lab
el="日期" width="180"></
el-table-column>
<
el-table-column prop="name" lab
el="姓名" width="180"></
el-table-column>
<
el-table-column prop="address" lab
el="地址"></
el-table-column>
</
el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2024
-01
-01',
name: '张三',
address: '北京市朝阳区'
},
{
date: '2024
-01
-02',
name: '李四',
address: '上海市浦东新区'
}
]
};
}
};
</script>
```
### 3.
实现筛选功能
添加筛选条件输入框和筛选按钮，通过`computed`属性
实现筛选逻辑。
```
vue
<template>
<div>
<
el-input v
-mod
el="filterText" placeholder="请输入筛选关键字"></
el-input>
<
el-button @click="doFilter">筛选</
el-button>
<
el-table :data="filteredData" style="width: 100%">
<
el-table-column prop="date" lab
el="日期" width="180"></
el-table-column>
<
el-table-column prop="name" lab
el="姓名" width="180"></
el-table-column>
<
el-table-column prop="address" lab
el="地址"></
el-table-column>
</
el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2024
-01
-01',
name: '张三',
address: '北京市朝阳区'
},
{
date: '2024
-01
-02',
name: '李四',
address: '上海市浦东新区'
}
],
filterText: ''
};
},
computed: {
filteredData() {
if (!this.filterText) {
return this.
tableData;
}
return this.
tableData.filter(item => {
return Object.values(item).some(value => {
return String(value).includes(this.filterText);
});
});
}
},
methods: {
doFilter() {
// 这里可以添加额外的逻辑，目前筛选逻辑在computed中已经
实现
}
}
};
</script>
```
### 4.
显示筛选结果
当用户输入筛选关键字并点击筛选按钮时，`computed`属性`filteredData`会根据输入的关键字对`
tableData`进行筛选，并将筛选结果
显示在`
el - table`中。
扫一扫
9001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
