VueJSのrenderレンダリング関数に基づいて、カスタムコンポーネントと組み合わせて、非常に強力なIViewのTableを作成します.
1、renderレンダリング関数の紹介
文字列テンプレートの代替案では、JavaScriptの最大のプログラミング能力を発揮できます.このレンダー関数は、VNodeを作成するための最初のパラメータとしてcreateElementメソッドを受信します.
コンポーネントが関数コンポーネントである場合、レンダリング関数は追加のcontextパラメータを受信し、インスタンスのない関数コンポーネントにコンテキスト情報を提供します.
2、render関数の使い方
以下はvue公式サイトの例です
3、iview tableコンポーネントの紹介
主に大量の構造化データを示すために使用されます.ソート、フィルタリング、ページング、カスタム操作、csvのエクスポートなどの複雑な機能をサポートします.
4、iview tableコンポーネントの使用
次のようにレンダリングされます.
5、ivew table render関数とrenderHeader紹介
render:
レンダーカラムをカスタマイズし、VueのRenderer関数を使用します.2つのパラメータが入力されます.1つ目はhで、2つ目はオブジェクトです.row、column、indexが含まれています.それぞれ、先行データ、現在の列データ、現在の行インデックスを指します.詳細は例を参照してください.Render関数の内容の学習
renderHeader:
カラムヘッダの表示内容をカスタマイズし、VueのRenderer関数を使用します.2つのパラメータが入力されます.1つ目はhで、2つ目はオブジェクトで、columnとindexを含み、それぞれ現在のカラムデータと現在のカラムインデックスです.
6、ivew table render関数の使用
次のようにレンダリング
7、iview renderとrenderHeaderはカスタムコンポーネントと組み合わせてtableテーブルをレンダリングする
QiDropdown.vueコンポーネントコードは次のとおりです.
8、親コンポーネントQiDropdownコンポーネントを導入し、tableのrenderとrenderHeader関数に適用する
次のようにレンダリングされます.
9、まとめ:
1)render関数とカスタムコンポーネントがあれば、iview tableコンポーネントの機能の単調さをもう恐れないでください.最初はiview tableの機能が少なすぎると思っていましたが、今はそれがあれば、あなたが実現したい表を実現することができます.とても簡単です.
2)ivew Dropdownコンポーネントにtransferプロパティを付けなければなりません.そうしないと正常に表示されません.
3)render関数はslotを使用できます.例えば、私のQiDrowdownコンポーネントの中にslot name=diyがあります.それはrender関数の中でQiDrownr配列に書きます.例えば:
注意:画像を使用する場合は、srcは次のように構成する必要があります.
10、引用
1)vue Rendererでのslotsの使用2)レンダリング関数&JSX 3)VueでのRendererレンダリング関数の理解
文字列テンプレートの代替案では、JavaScriptの最大のプログラミング能力を発揮できます.このレンダー関数は、VNodeを作成するための最初のパラメータとしてcreateElementメソッドを受信します.
コンポーネントが関数コンポーネントである場合、レンダリング関数は追加のcontextパラメータを受信し、インスタンスのない関数コンポーネントにコンテキスト情報を提供します.
2、render関数の使い方
以下はvue公式サイトの例です
var getChildrenTextContent = function (children) {
return children.map(function (node) {
return node.children
? getChildrenTextContent(node.children)
: node.text
}).join('')
}
Vue.component('anchored-heading', {
render: function (createElement) {
// kebabCase ID
var headingId = getChildrenTextContent(this.$slots.default)
.toLowerCase()
.replace(/\W+/g, '-')
.replace(/(^\-|\-$)/g, '')
return createElement(
'h' + this.level,
[
createElement('a', {
attrs: {
name: headingId,
href: '#' + headingId
}
}, this.$slots.default)
]
)
},
props: {
level: {
type: Number,
required: true
}
}
})3、iview tableコンポーネントの紹介
主に大量の構造化データを示すために使用されます.ソート、フィルタリング、ページング、カスタム操作、csvのエクスポートなどの複雑な機能をサポートします.
4、iview tableコンポーネントの使用
export default {
data () {
return {
columns1: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
}
}
次のようにレンダリングされます.
5、ivew table render関数とrenderHeader紹介
render:
レンダーカラムをカスタマイズし、VueのRenderer関数を使用します.2つのパラメータが入力されます.1つ目はhで、2つ目はオブジェクトです.row、column、indexが含まれています.それぞれ、先行データ、現在の列データ、現在の行インデックスを指します.詳細は例を参照してください.Render関数の内容の学習
renderHeader:
カラムヘッダの表示内容をカスタマイズし、VueのRenderer関数を使用します.2つのパラメータが入力されます.1つ目はhで、2つ目はオブジェクトで、columnとindexを含み、それぞれ現在のカラムデータと現在のカラムインデックスです.
6、ivew table render関数の使用
export default {
data () {
return {
columns7: [
{
title: 'Name',
key: 'name',
render: (h, params) => {
return h('div', [
h('Icon', {
props: {
type: 'person'
}
}),
h('strong', params.row.name)
]);
}
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
},
{
title: 'Action',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, 'View'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, 'Delete')
]);
}
}
],
data6: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park'
}
]
}
},
methods: {
show (index) {
this.$Modal.info({
title: 'User Info',
content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
})
},
remove (index) {
this.data6.splice(index, 1);
}
}
}
次のようにレンダリング
7、iview renderとrenderHeaderはカスタムコンポーネントと組み合わせてtableテーブルをレンダリングする
QiDropdown.vueコンポーネントコードは次のとおりです.
{{content}}
{{item.name}}
export default {
data(){
return{
activeColor:'#008cee',
defaultColor:'#495060',
localChoosedItem:''
}
},
props:{
placement:{
type:String,
default:'bottom-start'
},
showArrow:{
type:Boolean,
default:false
},
content:{
type:String,
default:''
},
data:{
type:Array,
default:()=>{
return [];
}
},
choosedItem:{
type:String,
default:''
}
},
watch:{
choosedItem:{
immediate:true,
handler(newv,oldv){
this.localChoosedItem = newv;
}
}
},
created(){
},
methods:{
ddClick(name){
this.$emit('on-choosed',name);
this.localChoosedItem = name;
}
}
}
8、親コンポーネントQiDropdownコンポーネントを導入し、tableのrenderとrenderHeader関数に適用する
import QiDropdown from '@/components/QiDropdown'
export default {
name: 'email-list',
components:{
QiDropdown
},
...
columns: [
{
title: ' ',
key: 'callout',
align:'center',
renderHeader:(h,params)=>{
return h(QiDropdown,{
props:{
placement:'bottom-start',
showArrow:true,
content:' ',
data:this.flags
},
on:{
'on-choosed':(value)=>{
this.queryForm.callout = value;
this.getResumeFromEmailBy();
}
}
});
},
render:(h,params)=>{
return h(QiDropdown,{
props:{
content:params.row.callout||'',
data:this.flags.slice(1)
},
on:{
'on-choosed':(value)=>{
this.choosedFlag(params.row.id,value);
}
}
},[
h('DropdownItem',
{
slot: 'diy',
style:{
color:'#2d8cf0'
},
props:{
name:'add',
divided:true
}
},
' '),
h('DropdownItem',
{
slot: 'diy',
style:{
color:'#2d8cf0'
},
props:{
name:'clear'
}
},
' ')
]);
}
},
...
次のようにレンダリングされます.
9、まとめ:
1)render関数とカスタムコンポーネントがあれば、iview tableコンポーネントの機能の単調さをもう恐れないでください.最初はiview tableの機能が少なすぎると思っていましたが、今はそれがあれば、あなたが実現したい表を実現することができます.とても簡単です.
2)ivew Dropdownコンポーネントにtransferプロパティを付けなければなりません.そうしないと正常に表示されません.
3)render関数はslotを使用できます.例えば、私のQiDrowdownコンポーネントの中にslot name=diyがあります.それはrender関数の中でQiDrownr配列に書きます.例えば:
h(QiDrowdown,
{// QiDrowdown props、 on、 style },
[// slot ， ， slot ：
h('DropdownItem',
{
slot: 'diy',// QiDrowdown slot name
style:{
color:'#2d8cf0'
},
props:{
name:'add',
divided:true
}
},
' '),
：
])h(' ', { ( vue props)}, [ ]){
// `v-bind:class` API
'class': {
foo: true,
bar: false
},
// `v-bind:style` API
style: {
color: 'red',
fontSize: '14px'
},
// HTML
attrs: {
id: 'foo'
},
// props
props: {
myProp: 'bar'
},
// DOM
domProps: {
innerHTML: 'baz'
},
// `on`
// `v-on:keyup.enter`
// keyCode。
on: {
click: this.clickHandler
},
// ， ， `vm.$emit` 。
nativeOn: {
click: this.nativeClickHandler
},
// 。 ：
// Vue
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array }
scopedSlots: {
default: props => createElement('span', props.text)
},
// ，
slot: 'name-of-slot',
//
key: 'myKey',
ref: 'myRef'
} 注意:画像を使用する場合は、srcは次のように構成する必要があります.
render: (h, params)=>{
return h('img', {
style:{
width: '100px'
},
domProps:{
src: params.row.material_img,
}
})
}10、引用
1)vue Rendererでのslotsの使用2)レンダリング関数&JSX 3)VueでのRendererレンダリング関数の理解