极客观点
项目管理
HarmonyOS
具体情况如下:
在一个table页面中，在table的最后一行添加了“编辑”按钮。
点击此按钮后，弹出Modal对话框，以修改此行的数据。
现在的问题是，在Modal 对话框中的RadioGroup似乎无法正确显示点击的数据。
但实际上数据已根据点击有了变化。
用此gif图说明。当点击RadioGroup按钮后，radio按钮并没有变化。此时点击"确定"按钮退出Modal对话框后，可以看出，radio按钮所绑定的数据已经改变。这个问题只在 Modal 对话框中的RadioGroup中出现。
请教：如何才能点击Modal对话框中的Radio按钮后，让按钮跟随绑定的数据变化呢
相关代码如下：
<template>
<Row class="vm-table vm-panel">
<div class="panel-body">
<Table :stripe="showStripe" :size="tableSize" :columns="showColumns" :data="dataShow" @on-selection-change="selectChange"></Table>
<Row type="flex" justify="space-between" class="footer">
<div class="info-bar">
每页显示 <Input-number class="input-number" v-model="showNum" :max="totalNum" :min="1" @on-change=" updateDataShow ">{{ showNum }}</Input-number>条记录
</div>
<div class="page">
<span class="total">共计 {{ totalNum }} 条记录</span><Page :total="totalNum" :current="currentPage" :page-size="showNum" @on-change=" pageChange "></Page>
</div>
</Row>
</div>
<Modal
v-model="modalEdit"
title="更新"
ok-text="确定"
cancel-text="取消"
v-on:on-ok="editOk">
<Form :label-width="70">
<Form-item label="联系电话">
<Input v-model="dataEdit['mobile_or_tel']" disabled></Input>
</Form-item>
<Form-item label="服务状态">
<Radio-group v-model="dataEdit['task_status']" type="button">
<Radio label="未联络" ></Radio>
<Radio label="已经联络未服务"></Radio>
<Radio label="已经联络已经服务"></Radio>
<Radio label="不为对方服务" ></Radio>
<Radio label="已经服务，未缴费"></Radio>
<Radio label="已经服务，已经缴费"></Radio>
</Radio-group>
<p>{{ dataEdit['task_status'] }}</p>
</Form-item>
<Form-item label="服务项目">
<Input v-model="dataEdit['service_type']" disabled></Input>
</Form-item>
<Form-item label="最后更新状态时间">
<Input v-model="dataEdit['update_at']" disabled></Input>
</Form-item>
<Form-item label="提交时间">
<Input v-model="dataEdit['create_at']" disabled></Input>
</Form-item>
</Form>
</Modal>
</Row>
</template>
<script>
export default {
name: 'VmTable',
props: {
type: String,
columns: Array,
data: Array
},
data () {
return {
deleteDisabled: true,
dataShow: [],
showNum: 10,
totalNum: 0,
showStripe: true,
tableSize: 'large',
currentPage: 1,
keyword: '',
modalEdit: false,
modalAdd: false,
modalDelete: false,
dataEdit: {},
dataDelete: [],
dataAdd: {},
formData: []
}
},
methods: {
editOk: function () {
console.log(this.dataEdit['task_status'])
this.$emit('edit-ok', this.dataEdit)
},
pageChange: function (page) {
this.currentPage = page
this.updateDataShow()
},
updateDataShow: function () {
let startPage = (this.currentPage - 1) * this.showNum
let endPage = startPage + this.showNum
this.dataShow = this.data.slice(startPage, endPage)
},
selectChange: function (data) {
this.dataDelete = data
},
renderOperate: function (h, params) {
return h('div', [
h('Button', {
props: {
type: 'info',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
console.log(JSON.stringify(params))
for (let i in params.row) {
this.dataEdit[i] = params.row[i]
}
delete this.dataEdit._index
this.modalEdit = true
}
}
}, '更新')
])
},
convertKey: function (value) {
let returnValue = value
this.columns.forEach(function (elem) {
for (let i in elem) {
if (i === 'key' && elem[i] === value) {
returnValue = elem.title
}
}
})
return returnValue
}
},
computed: {
showColumns: function () {
let showColumn = this.columns.slice()
showColumn.forEach(function (elem) {
elem.sortable = true
})
if (this.type === 'edit') {
showColumn.unshift({
type: 'selection',
width: 60,
align: 'center'
})
showColumn.push({
title: '操作',
key: 'action',
width: 150,
align: 'center',
render: this.renderOperate
})
}
return showColumn
},
radioChange: function () {
console.log('radioChange')
this.$emit('edit-ok', this.dataEdit)
}
},
watch: {
data: function () {
this.totalNum = this.data.length
this.dataShow = this.data.slice(0, this.showNum)
},
dataDelete: function () {
if (this.dataDelete.length === 0) {
this.deleteDisabled = true
} else {
this.deleteDisabled = false
}
}
},
mounted: function () {
this.totalNum = this.data.length
this.dataShow = this.data.slice(0, this.showNum)
}
}
</script>
刚刚又测试了一下。
本来Radio-group绑定的是dataEdit['task_status']中的值。
现在将dataEdit['task_status']替换成taskStatus后，也就是一个普通的变量，一切正常。
暂时推测是控件对双向绑定的值，对数组成员没处理好吧。