elementui 表格的简单封装

由于最近开发公司的后台项目遇到很多的表格的页面思来想去封装一下浅浅封装表格组件吧！

1.父组件代码 labesArr中主要写一写表格表头的配置项相关一些

2.子组件代码主要是控制渲染以及做一些判断

完整代码

1.父组件

<template>

<div>

<tables :tableData="tableData" @upArr="update"></tables>

</div>

</template>

<script>

import tables from '../view/tables/index.vue';

export default {

data() {

return {

tableData: {

// 这个里面全部写表头的配置项

labesArr: [

{ label: '序号', wdith: 100 ,type:'selection'},

{ label: '校区代码', wdith: 100,type:'' },

{ label: '校区名称', wdith: 100,type:'' },

{ label: '校区地址', wdith: 100,type:'' },

{ label: '负责人', wdith: 100,type:'' },

{ label: '联系方式', wdith: 100,type:'' },

{ label: '电子邮箱', wdith: 100,type:'' },

{ label: '操作', wdith: 100,type:'' },

],

datas: [

{

serial: 0,

schoolCode: '0',

studentNmae: '王八屯',

studentAddres: '王八路',

functionary: '陈剑',

concartPhone: '1111',

email: '2222',

width: 100,

},

{

serial: 1,

schoolCode: '0',

studentNmae: '王八屯',

studentAddres: '王八路',

functionary: '陈剑',

concartPhone: '1111',

email: '2222',

width: 100,

},

{

serial: 2,

schoolCode: '0',

studentNmae: '王八屯',

studentAddres: '王八路',

functionary: '陈剑',

concartPhone: '1111',

email: '2222',

width: 100,

},

{

serial: 3,

schoolCode: '0',

studentNmae: '王八屯',

studentAddres: '王八路',

functionary: '陈剑',

concartPhone: '1111',

email: '2222',

width: 100,

},

{

serial: 4,

schoolCode: '0',

studentNmae: '王八屯',

studentAddres: '王八路',

functionary: '陈剑',

concartPhone: '1111',

email: '2222',

width: 100,

},

{

serial: 5,

schoolCode: '0',

studentNmae: '王八屯',

studentAddres: '王八路',

functionary: '陈剑',

concartPhone: '1111',

email: '2222',

width: 100,

},

],

},

};

},

methods: {

update(row) {

console.log(row, '我是父组件触发的事件哦');

let ids = row.serial;

console.log(this.tableData.datas, 'tableData');

this.tableData.datas.forEach((item, index) => {

if (item.serial == ids) {

this.tableData.datas.splice(index, 1);

}

});

},

},

components: {

tables,

},

};

</script>

2.子组件

<template>

<div>

<el-table

ref="multipleTable"

:data="dataTables"

tooltip-effect="dark"

style="width: 100%"

@selection-change="handleSelectionChange"

>

<el-table-column type="selection" width="55"> </el-table-column>

<el-table-column

v-for="(item, index) in dataLable"

:key="index"

:label="item.label"

:width="item.width"

>

<template slot-scope="scope">

<span>

<span v-if="item.label == '序号'">{{ scope.row.serial }}</span>

<span v-if="item.label == '校区代码'">{{

scope.row.schoolCode

}}</span>

<span v-if="item.label == '校区名称'">{{

scope.row.studentNmae

}}</span>

<span v-if="item.label == '校区地址'">{{

scope.row.studentAddres

}}</span>

<span v-if="item.label == '负责人'">{{

scope.row.functionary

}}</span>

<span v-if="item.label == '联系方式'">{{

scope.row.concartPhone

}}</span>

<span v-if="item.label == '电子邮箱'">{{ scope.row.email }}</span>

<span v-if="item.label == '操作'"

><button @click="changArr(scope.row)">1234</button></span

>

</span>

</template>

</el-table-column>

</el-table>

</div>

</template>

<script>

export default {

props: {

tableData: Object,

},

data() {

return {

multipleSelection: [],

tableArr: [],

dataTables: [],

dataLable: [],

};

methods: {

// 自定义事件

changArr(row) {

console.log(row,'我是子组件触发的事件!!')

this.$emit('upArr',row);

toggleSelection(rows) {

if (rows) {

rows.forEach((row) => {

this.$refs.multipleTable.toggleRowSelection(row);

});

} else {

this.$refs.multipleTable.clearSelection();

}

handleSelectionChange(val) {

console.log(val, '000');

let arrs = val;

let ids = [];

arrs.forEach((item) => {

ids.push(item.date);

});

console.log(ids, '0');

mounted() {

this.dataTables = this.tableData.datas; //表格数据

this.dataLable = this.tableData.labesArr; //表头数据

};

</script>

然后子组件通过自定义事件在操作一栏进行自定义事件通知父组件进行删除修改以及一系列的操作

在这里大概就完成了刚毕业还是个菜鸡还有很多地方做的不好轻喷!!

elementui 表格的简单封装相关推荐

elementui表格复制_封装element-ui表格，我是这样做的
日日加班至夜半,环视周围无人走: 明晚八点准时走,谁不打卡谁是狗. 使用过element-ui的表格的同学应该都有这样的体会,做一个简单的表格还比较容易,但如果这个表格包含了顶部的按钮,还有分页,甚至 ...
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选)
[Vue]如何实现一个简单的表格数据筛选查找 (根据ElementUI表格展示)(数组筛选) 能够解决的问题在一个完整的数据数据渲染的 elementui 表格组件中,筛选输出数据目录布局代码 ...
elementui 表格中单元格自定义功能
客户相让表格的可操作空间变得更大,比如说可以修改表格内容(双击之后出现input),点击某一单元格可以弹窗等等,让一切可以需要的功能再单击单元格中实现. 其实在elementui的官方文档中也可以找到 ...
elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息
目的:elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息项目经理要求表格头部添加一个图标,鼠标移入提示用户字段包含的内容信息,以前没有开发过,故总结一下. 添加方法: 方法一 ...
ElementUI表格数据批量选中操作
ElementUI表格数据批量选中操作最近做项目时碰到个需求,要对表格中的数据批量处理,花了点时间最终解决了这个问题 elementui表格中封装了多选框,在el-column中选择type为sel ...
element-ui 表格修改后, 表格里面的数据页面不实时更新问题完美解
element-ui 表格修改后表格里面的数据后页面不实时更新问题完美解想要达到的效果:点击"更多"后,"更多"隐藏,删除和补仓显示:(有时间可全部看 ...
vue+element-ui表格实现隐私信息的加密展示和解密操作
vue+element-ui表格实现隐私信息的加密展示和解密操作(AES方法) 注:加密数据和密匙都由后端接口返回,这里仅对加密数据进行解密展示. 解密工具 : crypto-js 地址 : http ...
elementUI表格中使用 jszip+file-saver+qrcode展示二维码以及批量下载二维码（包括过程中的坑）
需求:在elementUI表格中显示二维码,以及批量下载二维码上图: 首先我们先做好前置工作npm下载 qrcode和 jszip和file-saver, 然后qrcode我封装成一个组件sm- ...
前端elementui表格拖拽sortablejs避坑，vue2前端表格列拖拽解决方案
sortablejs sortablejs是目前比较多人用的elementui表格拖拽的插件,但是这个插件的bug很不友好:主要bug是拖拽列后不能调整列的宽,处理这个bug只能是不让用户调整列宽. ...

elementui 表格的简单封装

elementui 表格的简单封装相关推荐

最新文章

热门文章