关键词：
组件
名称小写==》 用-链接
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:渲染指令事件组件props(代码片段)
...优秀之处，并有条不紊的将它们组合在一起。具有响应式组件化的虚拟DOM只提供视图层， props 查看详情
vue利用渲染函数创建弹窗组件，完美支持传值和事件监听(代码片段)
弹窗组件和其他组件不同，在页面初始化的时候，页面dom结构中是不存在弹窗组件的div节点，只有在调用时弹窗组件的div在会被动态的添加到页面中，并且当删除时，也需要在页面中删除；结合弹窗组件的... 查看详情
vue学习——父子组件的交互(代码片段)
前言如果你对组件的基础不是很了解，请先学习前一篇关于vue的文章，或者去官网学习，否则只会让你越学越乱父子组件交互父子组件属性的传递父子组件的交互通常的模式是：子组件获取父组件为其设置的属性&... 查看详情
渲染后的Vue组件事件
】渲染后的Vue组件事件【英文标题】：Vuecomponenteventafterrender【发布时间】：2017-11-2308:45:21【问题描述】：Vue中是否存在在元素重新渲染后触发的事件？我有一个更新的对象，这会导致我的模板更新。更新后我想触发一个运行jQuer... 查看详情
unity——ui的交互(代码片段)
...的范围可以将button旋转如果将图片改为透明来实现 Button组件 是否可以进行交互 交互效果： None没有交互效果 ColorTint颜色的变化 Sp... 查看详情
iviewtable表格组件无法拆分单元格的解决思路(代码片段)
最近在开发的Vue项目中，使用了iview第三方UI库;对于表格组件的需求是最多的，但是在一些特定场景下，发现iview的表格组件没有单元格合并与拆分的API，搜了一下发现很多同学提问关于iview表格组件的单元格如何拆分和合并的问... 查看详情
typescript组件交互：父组件监听子组件事件(代码片段)
前端面试题：vue(代码片段)
...v-if的区别 v-show通过CSS的display控制显示和隐藏 v-if组件是真正的渲染和销毁，而不是显示和隐藏 频繁切换显示状态用v-show，否则用v-if2.为何在v-for中用key(不用会报错) 必须用key，且不能是index和random diff算法中... 查看详情
vue+elementui实现批量删除功能(代码片段)
第一步：在el-table组件绑定 @selection-change事件 第二步：在调用父组件的子组件中添加当表格项发生变化时会触发事件函数:selectionChange(val)在method函数中添加如下代码:selectionChange(val)//表格选项发生变化console.log("触... 查看详情
vue函数组件的应用及场景(代码片段)
解释:函数式组件就是函数是组件函数式组件与普通组件的区别1.函数式组件需要在声明组件是指定functional2.不需要实例化，所以没有this,this通过render函数的第二个参数来代替3.没有生命周期钩子函数，不能使用计算属性，watch4.不... 查看详情
vue生命周期(代码片段)
...生命周期钩子下面为各个阶段所对应的事件：beforeCreate=组件实例刚刚创建，还未进行数据观测和事件的配置。created=实例已经创建完成，并且已经进行数据观测和事件配置（常用数据初始化）。beforeMount=模板编译之前，还没挂载... 查看详情
深入vue生命周期(代码片段)
...Vue生命周期 这篇博客将会从下面四个常见的应用诠释组件的生命周期，以及各个生命周期应该干什么事1.单组件的生命周期2.父子组件的生命周期3.兄弟组件的生命周期4.宏mixin的生命周期 生命周期：Vue实例从开始创建、... 查看详情
vue自定义组件标签click点击事件无效(代码片段)
<myheader:title="Position.name"ref="myh"@click="showtitle">查阅vue官方文档，得知click事件作用于组件内部，如果组件内没有写click事件，便会无响应。解决办法：加上.native 原生修饰符<myheader:title="Position.name"ref="myh"@click.native="sho 查看详情
ng-alain组件st表格，实现点击表格行变色，或者渲染变色(代码片段)
实现点击表格行变色html文件<st#st[data]="data"(change)="changeClick($event)"[columns]="columns"[page]="page"[widthMode]="STWidthMode"[scroll]="x:‘350px‘,y:‘400px‘"></st>ts文件函数//點擊表格行改變事件1changeClick(e:STChange)if(this.lastItem)this.lastItem[‘... 查看详情
Vue js没有渲染自定义组件
】Vuejs没有渲染自定义组件【英文标题】：Vuejsnotrenderingacustomcomponent【发布时间】：2017-11-0723:03:19【问题描述】：我正在使用这个-http://monterail.github.io/vue-multiselect/使用vue和那个库构建单个js文件，但其他代码仅在脚本标记中。组... 查看详情
vue的列表渲染及组件渲染(代码片段)
Vue的列表渲染注：其实使用的还是相关的vue的指令进行相应的数据绑定和渲染在前边写过一个博客来说指令的相关内容但是写的不细，就是写了相应的使用方法，在此要提到之前遇到的一个问题就是前端拿到返回数据进行数据渲... 查看详情
js使用vue自定义组件实现动态多层数据渲染+递归+踩坑(代码片段)
...包软件(WebPack，VueCli）的原生环境下使用vue自定义组件文章目录组件名称规则全局组件和局部组件简单的递归Demo组件名称规则首先说一下组件名称规则，注册的组件名称用了大写的话在使用时则将大写改为-大写的小... 查看详情
js使用vue自定义组件实现动态多层数据渲染+递归+踩坑(代码片段)
...包软件(WebPack，VueCli）的原生环境下使用vue自定义组件文章目录组件名称规则全局组件和局部组件简单的递归Demo组件名称规则首先说一下组件名称规则，注册的组件名称用了大写的话在使用时则将大写改为-大写的小... 查看详情