页面模块怎么获取VUE组件的input值
用的是antd.我在页面模板的table的columns上用scopedSlots: { customRender: 'edit' }
把table columns下的td中都插入了插槽,插槽中定义了自定义组件,点击td,就会把input渲染出来。input输入的值,会传给组件的value,求大神给个思路,想请教的是我现在页面上有很多td,每个td里面有自定义组件。我怎么把这些td中组件的value值都获取到,整合起来,多谢大神们
<a-table:columns="columns"
:data-source="data"
bordered>
<template slot="edit" slot-scope="text, record">
//table columns用scopedSlots: { customRender: 'edit' }绑定插槽
<div v-if="!record.progressstatus" >{{ text }}</div>
<div v-if='record.progressstatus'>
//根据td data的progressstatus属性判断是否渲染div
<edit :text="text" /> //edit自定义组件
</div>
</template>
</a-table>
//edit自定义组件const edit = {
template: `
<div class="editable-cell" @click="edit">
<div v-if="editable" >
<a-input :value="value" @change="handleChange" @pressEnter="check" />
</div>
<div v-else >
{{ value }}
</div>
</div>
`,
props: {
text: null
},
data () {
return {
value: this.text,
editable: false
}
},
methods: {
handleChange (e) {
const value = e.target.value
this.value = value
},
check () {
this.editable = false
// this.$emit('change', this.value);
},
edit () {
this.editable = true
}
}
}
回答
<edit :text="text"> 这个edit组件不必要,加上反而多增加父子组件通信交互;
// 把值保存在record中, record就是表格行数据
// 另外还需要增加一个按钮或者单击行来控制input显示与隐藏(见下图)
// 输入框输入内容后可以通过增加按钮来控制是否保存,也可用相关事件来控制
// 仅供参考
<a-table :columns="columns"
:data-source="data"
bordered>
<template slot="edit" slot-scope="text, record">
<div v-if="!record.progressstatus" >{{ text }}</div>
<div v-if='record.progressstatus'>
<!-- 把值保存在record中, record就是表格行数据 -->
<Input :value="text" class="form-label" style="width: 70%"
@change="e => handleChange(e.target.value, record)"
@pressEnter="check" />
</div>
</template>
</a-table>
handleChange(value, record) {
this.$set(record,'text', value)
},
check(){
// todo
},
<div v-if="editable" > <a-input :value="value" @change="handleChange" @pressEnter="check" />
</div>
你先解决两个问题:
1,“value” 是否受控?如果受控,那你准备怎么改写value?(看看你的“change”);
2,“pressEnter”可以做什么?能不能拿到this.value?
以上是 页面模块怎么获取VUE组件的input值 的全部内容, 来源链接: utcz.com/a/36628.html