vue 组件之纯表格渲染 |
您所在的位置：网站首页 › vue表格渲染数据 › vue 组件之纯表格渲染 |
vue 组件之纯表格渲染
|
组件
名称小写==》 用-链接
02===>
属性==> empty-text="暂无数据" 当表格中没有数据 就会显示 暂无数据
03==> :align="item.align" 是居中的方式 有 left center right
组件.vue export default { props: { // 传递过来的值 tableData: { type: Array, //数组类型 required: true //必须值 }, // 字段样式的数组 tabColumn: { type: Array, required: true } }, data() { return {}; } };
使用组件的页面（父） 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 } };
标签：shangdixinxi 上地信息 |
【本文地址】
今日新闻 |
推荐新闻 |