目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而。。。并不会正确渲染
<template>
<a-table
bordered
:scroll="{ x: scrollX, y: 600 }"
v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}"
:loading="loadingObj"
v-on="listeners"
>
<template v-for="(val, slot) in $slots" :slot="slot">{{ this.$slots[slot] }}</template>
</a-table>
</template>
后来,在某个写法里找到了a-table有scopedSlots这个参数,但是在template里直接赋值也不行,如下
<a-table
bordered
:scroll="{ x: scrollX, y: 600 }"
v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}"
:loading="loadingObj"
v-on="listeners"
:scopedSlots="$scopedSlots"
>
组件不采用template写,用render()
则变成:
render () {
const on = {
...this.$listeners
}
const props = { ...this.$attrs, ...this.$props, ...{ dataSource: this.body, columns: this.header }}
const table = (
<a-table bordered props={props} scopedSlots={ this.$scopedSlots } on={on}>
</a-table>
)
return (
<div class="dc-table">
{ table }
</div>
)
},
methods: () {
}
重点在于scopedSlots={ this.$scopedSlots }, 这样在使用组件的外部直接写slot就可以正常渲染
<dc-table
ref="table"
:columns="header"
:dataSource="body"
:loading="loading"
:pagination="pagination"
@change="handleTableChange"
class="table-fit"
>
// 这里是表头的渲染,下面会讲到
<template v-for="title in headerSlots" :slot="'$' + title">
<span :key="title">
<a-tooltip placement="right" trigger="click">
<template slot="title">{{ getHeaderTarget(title).remark }}</template>{{ getHeaderTarget(title).title }}<a-icon type="info-circle"/>
</a-tooltip>
</span>
</template>
// 这里渲染列数据
<template v-for="(item, index) in DECIMAL_PARAMS" :slot="item" slot-scope="text">
<span :key="index">
<span>{{ text | NumberFixed | NumberFormat }}</span>
</span>
</template>
</dc-table>
如下表格数据原本是数据,渲染成逢三断一,并2位小数,在header中为scopedSlots: {customRender: 'consumption'} 格式
还是同一个表格,要求表头有提示信息,所以我在表头也做了slots渲染了a-tooltip显示提示信息
此时header格式为[{scopedSlots: {customRender: 'consumption', title: '$consumption'} }]
表头渲染设置scopedSlots里title字段,名字自定义
此时的this.$scopedSlots也有$consumption表头slot字段,但是并不能正常渲染出来,但是发现this.$slots里有且只有表头的slot
此时我觉得,我应该把$slots的内容渲染在a-table里,则
render () {
const on = {
...this.$listeners
}
const props = { ...this.$attrs, ...this.$props, ...{ dataSource: this.body, columns: this.header }}
// slots循环
const slots = Object.keys(this.$slots).map(slot => {
return (
<template slot={slot}>{ this.$slots[slot] }</template>
)
})
const table = (
<a-table bordered props={props} scopedSlots={ this.$scopedSlots } on={on}>
{slots} // 放这里
</a-table>
)
return (
<div class="dc-table">
{ table }
</div>
)
},
大功告成
原文:https://segmentfault.com/a/1190000021411584
ajax可以实现不阻塞用户,达到无刷新更新部分页面的效果,它的异步请求都会首先考虑的是jquery,但是前提得加载它那核心包,如何使用原生的js来实现这一功能呢?
JavaScript两行代码实现DOM属性的封装以及交换两个变量的值。编程的时候不要忘记思考,否则你就只是一个完成工作的机器。所以,如果你现在的工作只是让你疯狂做业务而不给你思考和学习的时间,别犹豫,换一个。
vue的v-model是一个十分强大的指令,它可以自动让input里的值自动和你设定的值进行绑定,它是如何实现的呢?其实v-model只不过是一个语法糖而已,真正的实现靠的还是:(1) v-bind:绑定响应式数据,(2) 触发 input 事件 并传递数据 (重点)
目前前端三大框架(Vue.js, Angular.js, React.js)都在引领着前端的组件化开发方向,组件化的前端开发方式的确为业务实现带来了前所未有的方便,其实组件化开发早已经具有(YUI),但如何封装一个优秀的组件,可能并不是每位前端开发者都能够做好的。
JS 中使用 fetch 更加高效地进行网络请求,由于fetch 的请求方式同 $ajax 和 axios 都不太一样,为了方便请求过程,进行Fetch网络封装类:方式一传统使用回调函数的方式、方式二借助ES6中的promise的方式封装。
在日常开发中,我们少不了使用 Promise,而透过封装抽象方法,可以避免造轮子,写出更加优雅的代码。例如:将任意函数,化为具有异步能力的函数、改装成具有并发上千万请求的函数、使用 Web Worker 来使用不同线程、暂停若干秒再继续
最近做了同一个样子的小程序的支付宝版本,现在如果想想是开发两次的话心里应该是很难受的。去年11月12月份左右开发了两个微信小程序是一个在超市买商品的,一个用户版本,一个商户版本的。我们团队看到了uniapp这个东西
当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, 如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间
这个时候就要说each了,还是之前的,倘若页面上有N个class为div的元素呢,即:this.length>1,这里each就必然要上场了,且每个对象都要返回,所以此段代码无疑是最方便的写法了
ajax 的全称是Asynchronous JavaScript and XML,简单理解下:ajax就是异步的js和服务端的数据;GET请求的数据会附在URL之后, 以 ? 分割URL和传输数据, 参数之间以 & 相连
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!