用vue+element实现一个内容显示或隐藏的功能。要求:1.点击按钮可以将内容隐藏,并将隐藏的内容保存在一个数组当中,2.可以查看隐藏的内容,3.内容是由列表渲染出来并且只能对列表中的某一条数据进行显示隐藏,4.有删除内容按钮并且有卸载的进度条
时间: 2024-03-21 12:41:47 浏览: 25
好的,以下是实现代码:
```
<template>
<div>
<el-table :data="list" :key="index" border>
<el-table-column prop="text" label="内容"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="toggle(scope.$index)">
{{ scope.row.show ? '隐藏' : '显示' }}
</el-button>
<el-button type="danger" size="small" @click="remove(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div v-if="hiddenList.length > 0">
<h3>隐藏内容</h3>
<ul>
<li v-for="(item, index) in hiddenList" :key="index">{{ item.text }}</li>
</ul>
</div>
<el-button type="danger" @click="uninstall">卸载</el-button>
<el-progress v-if="uninstalling" :percentage="100" :status="'success'" />
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ text: '内容1', show: true },
{ text: '内容2', show: true },
{ text: '内容3', show: true },
],
hiddenList: [],
uninstalling: false,
};
},
methods: {
toggle(index) {
const item = this.list[index];
item.show = !item.show;
if (!item.show) {
this.hiddenList.push(item);
} else {
this.hiddenList.splice(this.hiddenList.indexOf(item), 1);
}
},
remove(index) {
const item = this.list[index];
if (!item.show) {
this.hiddenList.splice(this.hiddenList.indexOf(item), 1);
}
this.list.splice(index, 1);
},
uninstall() {
this.uninstalling = true;
setTimeout(() => {
this.$destroy();
}, 2000);
},
},
};
</script>
```
实现思路:
1. 使用 Element UI 的 el-table 渲染出列表,使用 el-button 组件绑定按钮的点击事件。
2. 点击按钮后,将对应的 show 属性取反,同时将该元素添加到 hiddenList 数组中(如果原本是显示的),或从 hiddenList 数组中删除(如果原本是隐藏的)。
3. 点击删除按钮后,先判断该元素是否是隐藏状态,如果是,则从 hiddenList 中删除,再从 list 中删除。
4. 点击卸载按钮后,设置 uninstalling 属性为 true,同时使用 setTimeout 模拟一个卸载进度条,进度条完成后调用 $destroy 方法卸载组件。
注意:为了实现卸载进度条,使用了 Element UI 的 el-progress 组件,只需要设置 percentage 为 100,并设置 status 为 'success' 即可显示一个完成的进度条。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)