Vue中如何动态显示表格内容
作者：橙子微笑
这篇文章主要介绍了Vue中如何动态显示表格内容问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
在项目中，我们可能会用到表格来显示不同的数据，表格显示数据，无非是列的内容不同，所以，我们可以考虑封装个公共的表格组件，动态得显示不同的数据
实现截图
如下：
在项目中创建一个公共表格组件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>
在建一个父组件
引入子组件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>
然后就可以实现表格内容动态显示啦~
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。