vue实现自定义表格工具扩展
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了vue自定义表格工具扩展的具体代码，供大家参考，具体内容如下
工具组件
<template>
<div class="right-btn">
<el-row>
<el-tooltip
effect="dark"
:content="showSearch ? '隐藏搜索' : '显示搜索'"
placement="top"
>
<el-button
size="mini"
circle
icon="el-icon-search"
@click="toggleSearch()"
/>
</tooltip>
<el-tooltip
effect="dark"
content="刷新"
placement="top"
>
<el-button
size="mini"
circle
icon="el-icon-refresh"
@click="refresh()"
/>
</el-tooltip>
<el-tooltip
effect="dark"
content="显隐列"
placement="top"
v-if="columns"
>
<el-button
size="mini"
circle
icon="el-icon-menu"
@click="showColumn()"
/>
</el-tooltip>
</el-row>
// 显隐列对话框
<el-dialog
:title="title"
:visible.sync="open"
append-to-body
>
<el-transfer
:title="['显示', '隐藏']"
v-model="value"
:data="columns"
@change="changeData"
></el-transfer>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'RightToolbar',
data () {
return {
value: [], // 显隐数据
title: "显示/隐藏", // 弹出层标题
open: false, // 弹出层显示状态
}
},
prop: {
showSearch: {
type: Boolean,
default: true
},
columns: {
type: Array
}
},
created () {
// 显隐列初始默认隐藏列
for (let item in this.columns) {
if (this.columns[item].visible === false) {
this.value.push(parseInt(item))
}
}
}
methods: {
// 搜索
toggleSeach () {
this.$emit('update:showSeach', !this.showSearch);
},
// 刷新
refresh () {
this.$emit('queryTable');
},
// 打开显隐列对话框
showColumn (){
this.open = true;
},
// 右侧列表元素变化
changeData (data) {
for (var item in this.columns) {
const key = this.columns[item].key;
this.columns[item].visible = !data.includes(key);
}
}
}
}
</script>在main.js全局注册工具组件
import RightToolbar from '@/components/RightToolbar';
// 全局组件挂载
Vue.component('RightToolbar', RightToolbar);其他页面引入工具组件
<template>
<div class="index">
<el-form v-show="showSearch"></el-form>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
:columns="columns"
>
<right-toolbar>
<el-table>
<el-table-column label="用户编号" v-if="columns[0].visible"></el-table-column>
<el-table-column label="用户名称" v-if="columns[1].visible"></el-table-column>
<el-table-column label="用户昵称" v-if="columns[2].visible">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
// 显示搜索条件
showSearch: true,
// 列信息
columns: [
{key: 0, label: '用户编号', visible: true},
{key: 1, label: '用户名称', visible: true},
{key: 2, label: '用户昵称', visible: true}
// ...
]
}
},
created () {
this.getList();
},
// 查询
getList () {
// 调用接口
}
}
</script>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
