vue 组件之纯表格渲染--没有事件交互
2023-09-27 14:22:20 时间
组件
名称小写==》 用-链接
02===>
属性==> empty-text="暂无数据" 当表格中没有数据 就会显示 暂无数据
<el-table-column
v-for="item in tabColumn"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:width="item.width"
:align="item.align"
empty-text="暂无数据"
>
</el-table-column>
03==> :align="item.align" 是居中的方式 有 left center right
组件.vue
<template>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column
v-for="item in tabColumn"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:width="item.width"
:align="item.align"
empty-text="暂无数据"
></el-table-column>
</el-table>
</template>
<script>
export default {
props: {
// 传递过来的值
tableData: {
type: Array, //数组类型
required: true //必须值
},
// 字段样式的数组
tabColumn: {
type: Array,
required: true
}
},
data() {
return {};
}
};
</script>
使用组件的页面(父)
<template>
<div>
<mytab :tableData="tableData" :tabColumn="tabColumn"></mytab>
</div>
</template>
<script>
import mytab from "../../../components/my-tab";
export default {
data() {
return {
// 表格数据
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市 1518 弄",
"tel":"18383838",
},
{
date: "2016-05-04",
name: "小玩法",
address: "上海市普陀1517 弄",
"tel":"18383838",
},
{
date: "2016-05-01",
name: "王小",
address: "上海市普陀1519 弄",
"tel":"18383838",
},
{
date: "2016-05-03",
name: "王虎",
address: "上海市普陀区1516 弄",
"tel":"18383838",
}
],
// 字段数组
tabColumn: [{
prop: 'date',
label: '日期',
width: '180',
align:'left',
}, {
prop: 'name',
label: '姓名',
width: '180',
align:'center',
}, {
prop: 'address',
label: '地址',
width: '180',
align:'center',
},
{
prop: 'tel',
label: '电话',
width: '180',
align:'center',
}
],
};
},
components: {
mytab
}
};
</script>
相关文章
- Vue开发规范
- 学好vue靠他就行了——vue脚手架,自定义事件,插槽等复杂内容
- vue全局事件总线和消息订阅详细讲解
- vue组件上绑定原生事件
- vue 表格组件 有事件交互(二)
- Vue在子组件中判断父组件是否传来事件
- vue事件修饰器
- 使用IDEA工具配置和运行vue项目(详细其中的坑)
- vue中鼠标事件
- vue 事件修饰符和按键修饰符
- Vue中传递自定义参数到后端、后端获取数据(使用Map接收参数)
- 关于vue自定义事件中,传递参数的一点理解
- Vue源码探究-事件系统
- 【vue后台管理系统】基于Vue+Element-UI+ECharts开发通用管理后台(下)
- Vue cli3.0创建Vue项目
- Vue + Webpack + Vue-loader 系列教程
- vue 里使用 js-base64 然后打包出现报错?
- 【VUE】基础用法(属性与事件的绑定,条件渲染等)
- 滴滴 webapp 5.0 Vue 2.0 重构经验分享
- vue-router总结
- 解决vue项目一直报格式错误
- vue 自定义事件
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航
- 前端学习之VUE基础一:什么是Vue、指令、事件/样式/属性绑定、分支/循环结构