using the background, when using the component to customize the table in the vue-admin framework, I want to add a button to the table and implement the dialog form through buttons. Due to functional requirements, I need different pages and different dialog form fields, so I need to add a slot tag to the custom form that comes with the framework and reuse it when I use it, but in the process of using the data, defined by my sub-component It has been reported wrong and undefined, how should I modify it?
parent component (multi-function table) part of the code, my purpose is to add a button, but for different pages, button text, the dialog box form is different:
<div v-if="searchable && searchPlace === "top"" class="search-con search-con-top">
<Select v-model="searchKey" class="search-col">
<Option v-for="item in columns" v-if="item.key !== "handle"" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
</Select>
<Input @on-change="handleClear" clearable placeholder="" class="search-input" v-model="searchValue"/>
<Button @click="handleSearch" class="search-btn" type="primary"><Icon type="search"/></Button>
<slot></slot>
</div>
Sub-components (using multi-function tables):
data () {
return {
model1: false,
columns: [
{ title: "", key: "code", sortable: true },
{ title: "", key: "format", editable: true },
{ title: "", key: "create_time" },
{
title: "Handle",
key: "handle",
options: ["delete"],
button: [
(h, params, vm) => {
return h("Poptip", {
props: {
confirm: true,
title: "?"
},
on: {
"on-ok": () => {
vm.$emit("on-delete", params)
vm.$emit("input", params.tableData.filter((item, index) => index !== params.row.initRowIndex))
}
}
})
}
]
}
],
tableData: [
{
"code": "asdv1321fs",
"format": "205",
"create_time": "2018-09-20 09:38:54"
},
{
"code": "asdv4532fs",
"format": "205",
"create_time": "2018-09-20 09:38:54"
},
{
"code": "asdv1321fs",
"format": "205",
"create_time": "2018-09-20 09:38:54"
},
{
"code": "asdv1321fs",
"format": "205",
"create_time": "2018-09-20 09:38:54"
},
{
"code": "asdv1321fs",
"format": "205",
"create_time": "2018-09-20 09:38:54"
}
]
}
}
but error:
Property or method "modal1" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
I wanted to use props to solve the problem, but I don"t seem to be able to use