Vue中动态显示表格内容

在项目中，我们可能会用到表格来显示不同的数据，表格显示数据，无非是列的内容不同，所以，我们可以考虑封装个公共的表格组件，动态得显示不同的数据
实现截图如下：

1.首先在项目中创建一个公共表格组件table.vue，代码如下

<template><!--这里放其他内容，表格等--><el-table :data="tableData" border  style="width: 100%;"v-loading="tableLoading" ><el-table-column  align="center" v-for="(th, key) in tableColumnsConfig" :key="key" :prop="th.prop" :label="th.label":width="th.width"  :show-overflow-tooltip="true" ><template slot-scope="scope"><div v-if="th.prop==''&&th.type=='index'">{{scope.$index+(cpage - 1) * psize + 1}}</div><div v-else-if="th.prop==''"><el-button  :type="btn.type=='del'?'danger':'primary'" v-for="(btn,index) in th.operate"  size="mini" :key="index" @click="btnHandle(scope.row,btn.type)">{{btn.name}}</el-button></div><div v-else><span>{{ scope.row[th.prop] }}</span></div></template></el-table-column></el-table>
</template>
<script>export default {name: 'refactor_table',props: {tableData: {type: Array,default: function() {return []}},/***  设置table 加载icon*/tableLoading: {type: Boolean,default: false},tableColumnsConfig: {type: Array,default: function() {return []}}},data(){return{cpage:1,psize:10,}},mounted(){/* if(this.tableData && this.tableData.length>0){this.tableLoading=false;} *//* console.log(this.tableColumnsConfig); */},methods: {btnHandle(row, type) {this.$emit("operateHandle", row, type)}}}
</script><style></style>

2.然后在建一个父组件，引入子组件table.vue，并把动态获取的表格数据传给table.vue

<template><div><refactor-table :table-data="tableData" :table-columns-config="tableColumns" :table-loading="loading" @operateHandle="tableOperateHandle"></refactor-table><pagination :currentPage="currentPage" :limit="limit" :total="total" :small="small"></pagination></div>
</template><script>import RefactorTable from './sub/table.vue';import Pagination from '@/components/Pagination/index.vue'export default {data() {return {loading: false,tableHeight: 300,tableData: [],tableColumns: [{label: '序号',width: '50',prop: '',type:"index"},{label: '节点id',width: '',prop: 'id'},{label: '农户名称',width: '',prop: 'name',},{label: '所属中心店',width: '',prop: 'grade',},],currentPage: 1,limit: 10,total: 0,small: true}},created() {this.loadingTable();},methods: {loadingTable() {// 初始化table 数据this.tableData = [{id: '1938238',name: '节点',grade: 'ERWFD'},{id: '3241',name: '节点B',grade: 'FDD'},{id: '8238',name: '节点C',grade: 'FVDFA'},{id: '3424',name: '节点',grade: 'ERWFD'},{id: '32ree',name: '节点B',grade: 'FDD'},{id: '821221',name: '节点C',grade: 'FVDFA'},{id: '89238',name: '节点',grade: 'ERWFD'},{id: '323432',name: '节点B',grade: 'FDD'},];// 最后增加一列为操作this.tableColumns.push({prop: '',label: '操作',width: 280,align: 'center',operate: [{type: 'add',name: '新增',},{type: 'del',name: '删除',},]});},/*** 接收table 组件操作时传入的参数* @param row {object} 所选行* @param type {String} 操作类型（add,del）*/tableOperateHandle(row, type) {console.log(row, type)}},components: {RefactorTable,Pagination},//接收子组件值handleCurrentChange(cpage) {this.currentPage = cpage;},handleSizeChang(psize) {this.limit = psize;}}
</script>

3.然后就可以实现表格内容动态显示啦~

Vue中动态显示表格内容相关推荐

vue中table表格导出为图片格式
vue中table表格点击下载为图片格式实现思路:给页面中需要导出为图片的内容添加id名,调用封好的方法即可直接导出.以下是具体的实现方法 1.安装依赖 npm install --save htm ...
为何excel中数据无法计算机,电脑中excel表格内容无法复制的解决方法
一位朋友反馈自己在Excel中录入完数据后想要进行复制,将工作表内容直接复制到另一个表中去,可是操作时却失败了.那么,这该怎么办呢?下面是小编给大家分享的电脑中excel表格内容无法复制的解决方法.有 ...
vue 中展示PDF内容
vue 中展示PDF内容不久前有个需要改的需求,以前是直接根据链接让用户下载对应pdf文件来查看,最主要是给用户查看,然而这种并不是很安全的,其他用户可以进行下载或者使用pdf链接分享给其他人,所以 ...
vue中打印表格，打印不全的问题
vue中打印表格,打印不全的问题 html部分 <TableDetailsclass="table-box"ref="inventoryDetails"& ...
python读取word文档中的表格内容
1. 使用到的库 :docx(python_docx‑0.8.10‑py2.py3‑none‑any.whl) 下载地址:https://download.lfd.uci.edu/pythonlibs ...
Vue 中的表格操作
Vue 中的表格操作在 Web 开发中,表格是非常常见的元素之一.在 Vue 中,我们可以使用一些组件和插件来实现表格的操作.在本文中,我们将介绍 Vue 中的表格操作的基本原理和用法,并给出一些实 ...
Vue中实现表格隔行换色效果
一.原理在 Vue 中,进行表格行的循环输出时,一般使用 v-for 指令,每次循环都能得到该行的索引 index ,用每一行的索引除以2取余,余数等于1,可以使用一种颜色作为背景色,余数等于0,可 ...
vue 中 vue-print-nb 表格打印不全的问题
先安装 vue-print-nb npm install vue-print-nb --save 然后main.js引入 import Print from 'vue-print-nb' Vue.us ...
vue中el-table插槽内容使用show-overflow-tooltip属性无法显示省略号问题-附解决方法
文章目录前言一.问题描述二.解决办法总结前言好久没写博客了,之前说好的每日一更,现在已经快一个月了,还是人太懒了吧,终于找到工作了,在公司实习搞前端开发,具体是什么公司就不说了.为了实习工 ...

Vue中动态显示表格内容

Vue中动态显示表格内容

Vue中动态显示表格内容相关推荐

最新文章

热门文章