<template>
<div>
<el-table :data="tableData" border style="width: 100%" ref="table">
<el-table-column
fixed
type="index"
align="center"
:index="1">
<template #header>
<i class="icon icon20 icon-search" @click="visible = true"></i>
</template>
</el-table-column>
<el-table-column
prop="date"
label="日期"
width="150"
v-if="showColumn.date"
>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120"
v-if="showColumn.name"
>
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="120"
v-if="showColumn.provinces"
>
</el-table-column>
<el-table-column
prop="city"
label="市区"
width="120"
v-if="showColumn.city"
>
</el-table-column>
<el-table-column
prop="address"
label="地址"
minWidth="300"
v-if="showColumn.adreess"
>
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120"
v-if="showColumn.zipCode"
>
</el-table-column>
</el-table>
<el-dialog title="字段配置" v-model="visible">
<transition name="fade">
<div>
<div>选择显示字段</div>
<div>
<el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox>
<el-checkbox v-model="showColumn.name">姓名</el-checkbox>
<el-checkbox v-model="showColumn.provinces">省份</el-checkbox>
<el-checkbox v-model="showColumn.city">市区</el-checkbox>
<el-checkbox v-model="showColumn.adreess">地址</el-checkbox>
<el-checkbox v-model="showColumn.zipCode">邮编</el-checkbox>
</div>
</div>
</transition>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible = false">取 消</el-button>
<el-button type="primary" @click="saveColumn">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import {computed, ref, watch, onMounted,reactive} from 'vue'
export default {
setup(){
const visible = ref(false)
const tableData = ref(
[
{
date: "2016-05-02",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333,
},
{
date: "2016-05-04",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1517 弄",
zip: 200333,
},
{
date: "2016-05-01",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1519 弄",
zip: 200333,
},
{
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1516 弄",
zip: 200333,
}
]
)
const showColumn =reactive({
date: true,
name: true,
provinces: true,
city: true,
adreess: true,
zipCode: true,
})
const toggleVisible = () => {
visible.value = !visible.value;
};
const handleClick = (row) => {
console.log(row);
};
const saveColumn = () => {
localStorage.setItem("columnSet", JSON.stringify(showColumn));
visible.value = false;
};
onMounted(()=>{
// 发请求得到showColumnInitData的列的名字
if (localStorage.getItem("columnSet")) {
Object.assign(showColumn, JSON.parse(localStorage.getItem("columnSet")));
}
})
return{
visible,
tableData,
showColumn,
toggleVisible,
handleClick,
saveColumn,
}
}
};
</script>
<style lang="postcss" scoped>
/* 控制淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
el-table 表格筛选,展示/隐藏列
最新推荐文章于 2024-07-22 12:29:37 发布
该代码示例展示了如何在Vue.js应用中使用El-Table组件动态显示和隐藏表格列。用户可以通过点击搜索图标打开一个对话框,选择要显示的字段,如日期、姓名、省份、市区、地址和邮编。选择后,表格會实时更新以显示选定的列。此外,还实现了将用户配置存储到本地存储的功能。
摘要由CSDN通过智能技术生成