VUE-Table 에 연 결 된 Input 은 render 를 통 해 양 방향 연결 데 이 터 를 구현 하 는 예제 입 니 다.
HTML 의 테이블
<Card>
<div ref="print" >
<Table width="100%" height="500" size="small" :columns="columns7" :stripe="true" :data="data" border ></Table>
</div>
</Card>
JS 코드
<script>
export default {
data () {
return {
columns7: [
{
title: ' ',
type: 'index',
width: 200
},
{
title: ' ',
width: 350,
key:'newLots'
},
{
title: ' ',
key: 'numLots',
width: 350,
align: 'center',
render: (h, params) => {
var vm = this;
return h('div', [
h('Input', {
props: {
// Input
value:params.row.numLots,
},
on:{
'on-change' (event) {
//
//
params.row.numLots = event.target.value;
vm.data[params.index] = params.row;
}
}
},)
]);
}
},
{
title: ' ',
key: 'action',
width: 350,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'error',
size: 'default'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.openDeleteDialog(params.index)
}
}
}, ' ')
]);
}
}
],
data: [],
}
}
}
</script>
이렇게 하면 Input 과 Table 셀 데이터 의 양 방향 연결 을 실현 합 니 다.값 은 셀 을 직접 순환 하여 값 을 추출 합 니 다.양 방향 바 인 딩 데이터 의 핵심 코드:
on:{
'on-change' (event) {
//
//
params.row.numLots = event.target.value;
vm.data[params.index] = params.row;
}
}
완성~이상 의 VUE-Table 에 연 결 된 Input 이 render 를 통 해 양 방향 으로 연 결 된 데 이 터 를 실현 하 는 예 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주시 기 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
VUE 기반 장치가 PC인지 모바일 포트인지 판단실제 개발 과정에서 자주 발생하는 수요는 현재 웹 페이지에 로그인한 장치가 PC인지 이동인지를 판단하고 PC 측과 모바일 측이 서로 다른 웹 내용을 표시하도록 요구하는 것이다. 그러면 현재 로그인 장치에 대한 판단이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.