数据库存入的是数字,select菜单根据数字显示文字,并且对字段进行改查以及回显
1、编辑页面
<i-select v-model="edit.type" style="width:100%">
<i-option v-for="item in typeList" :key="item.value" :value="item.value">{{ item.label }}</i-option>
</i-select>
export default {
data() {
return {
typeList: [
{
value: '1',
label: '数据采集'
},
{
value: '2',
label: '数据生产'
},
{
value: '3',
label: '综合项目'
},
{
value: '4',
label: '外包项目'
},
{
value: '5',
label: '其他项目'
}
]
}
}
}
写到此处便可添加修改数据,然后进行回显
在列表页面展开编辑页面时,对数据进行处理,edit.type为数字时不会默认显示,需要将数字转换为字符串
列表页面中添加编辑模态框组件,其他功能自己实现,这里只对edit.type进行处理
<Edit ref="edit" :model="edit" @on-update="handleGetList"></Edit>
import Edit from './ProjectEdit'
export default {
name: 'Project',
components: {
Edit
}
// ...
}
/**
* 展开编辑界面
* @param {object} row 当前行数据
*/
handleEdit(row) {
// 编辑页模态框显示
this.$refs['edit'].showModal('edit')
// 模拟异步请求(获取详情)
setTimeout(() => {
// edit为当前行数据
let edit = Object.assign({}, row)
// 项目类型回显
if (edit.type) {
edit.type = edit.type.toString()
}
// 日期回显
if (edit.planStartData) {
edit.planStartData = new Date(edit.planStartData)
}
this.edit = {
...edit
}
this.$refs['edit'].getPatch() // 获取补丁数据
}, 800)
},
3、回显之后在点击显示添加模态框时(添加与修改是同一页面,只是绑定的数据不同)将回显的数据置空,在列表页添加
mounted() {
this.init = Object.assign({}, this.edit) // 复制初始表单数据
this.handleGetList() // 获取列表数据
}
methods: {
// 显示新增模态框
handleCreate() {
// 初始化绑定数据,相当于置空
this.edit = Object.assign({}, this.init)
this.$refs['edit'].showModal() // 显示模态框
this.$refs['edit'].getPatch() // 获取补丁数据
}
}