ant design vue에서 표 형식 렌더링 방식 지정
렌더링 방법 1:
렌더 함수를 지정합니다.
const columns = [
{
title: ' ',
dataIndex: 'key',
customRender: renderContent //
}, {
title: ' ',
dataIndex: 'keyword',
customRender: (text, row, index) => {
if (index < 4) { // 4 a
return <a href="javascript:;" rel="external nofollow" rel="external nofollow" >{text}</a>
}
return { // 4
children: text,
attrs: {
colSpan: 4
}
}
}
}
]
const renderContent = (value, row, index) => {
const obj = {
children: value,
attrs: {}
}
return obj
}
렌더링 방법 2:해당 슬롯 템플릿을 직접 호출하려면 다음과 같이 하십시오.
<a-table :columns="columns" :dataSource="data" :pagination='pagination'>
<template slot="operation">
<a-select placeholder=" " style="width: 100%" @change="listHandleChange">
<a-select-option value="1"> </a-select-option>
<a-select-option value="2"> </a-select-option>
<a-select-option value="3"> </a-select-option>
</a-select>
</template>
<template slot='progress' slot-scope="text,record">
<span>{{text}}</span>
<span v-if='record.progressstatus'><a-icon class='arrow-up' type="arrow-up" /> </span>
<span v-if='!record.progressstatus'><a-icon class='arrow-down' type="arrow-down" /></span>
</template>
</a-table>
const columns = [
{
title: ' ',
dataIndex: 'number',
customRender: renderContent
}, {
title: ' ',
dataIndex: 'name',
customRender: (text, row, index) => {
return {
children: <a href="javascript:;" rel="external nofollow" rel="external nofollow" >{text}</a>,
attrs: {}
}
}
}, {
title: ' ',
dataIndex: 'progress',
scopedSlots: { customRender: 'progress' } // slot-scope , progress, , data[n]
}, {
title: ' ',
dataIndex: 'operate',
scopedSlots: { customRender: 'operation' } // operation
}
]
const data = [
{
key: 6,
number: 6,
name: ' ',
progress: '88%',
progressstatus: 1
}
]
보충 지식: Ant design vue 프레임워크,table 컨트롤러에서customRow 사용법의 구덩이오늘 코드를 쓸 때 Ant 디자인 프레임워크에 있는
이 방법은 공식 문서에 다음과 같은 사용 설명이 있습니다.
<Table
customRow={(record) => {
return {
props: {
xxx... //
},
on: { //
click: (event) => {}, //
dblclick: (event) => {},
contextmenu: (event) => {},
mouseenter: (event) => {}, //
mouseleave: (event) => {}
},
};
)}
customHeaderRow={(column) => {
return {
on: {
click: () => {}, //
}
};
)}
/>
공식적인 이 작법은 라마다의 문법에 속해야 하는데 오늘 내가 사용할 때도 이런 작법을 사용했다.다음과 같습니다.
methods:{
getDetailList(id){
//
},
rowClick: (record, index) => ({
//
on: {
click: event => {
//
console.log('record', record)
console.log('index', index)
console.log('event', event)
this.getDetailList(record.id) // ,
}
}
})
}
실행할 때 다음과 같은 오류가 보고됩니다.[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘getDetailList' of undefined”.
lamada 표현식을 사용하지 않으면 이러한 문제가 발생하지 않습니다. 수정된 rowClick 방법은 다음과 같습니다.
rowClick(record, index) {
return {
on: {
click: () => {
console.log(record, index)
this.getDetailList(record.matbillid)
}
}
}
},
getDetailList 메서드를 올바르게 호출할 수 있습니다.상기 ant 디자인 vue에서 표 지정 형식 렌더링 방식은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ant design vue에서 표 형식 렌더링 방식 지정주의점: 정의된columns는 반드시 데이터에 써야 합니다. 그렇지 않으면 불러오는 과정에서 렌더링 순서로 인해 렌더링 함수를 식별할 수 없습니다. 렌더링 방법 1: 렌더 함수를 지정합니다. 렌더링 방법 2: 해당 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.