<div>
<a-modal v-model="visible" title="产品详情" @ok="handleOk">
<a-form id="detail" v-model="form" :form="form" @submit="handleSubmit" ref="form">
<a-form-item label="姓名">
<a-input :value="form.name"/>
</a-form-item>
<a-form-item label="选择框一" has-feedback>
<a-select :value="form.select1">
<a-select-option value="1"> 是 </a-select-option>
<a-select-option value="0"> 否 </a-select-option>
</a-select>
</a-form-item>
<a-form-item label="选择框二" has-feedback>
<a-select :value="form.select2">
<a-select-option value="1"> 是 </a-select-option>
<a-select-option value="0"> 否 </a-select-option>
</a-select>
</a-form-item>
</a-form>
</a-modal>
<a-table :columns="columns" :data-source="data">
<a slot="name" slot-scope="text">{{ text }}</a>
<span slot="customTitle">Name</span>
<span slot="action" slot-scope="text, record">
<a @click="showModal(record)">Delete</a>
</span>
</a-table>
</div>
</template>
<script>
const columns = [
{
dataIndex: "name",
key: "name",
slots: { title: "customTitle" },
scopedSlots: { customRender: "name" },
},
{
title: "Age",
dataIndex: "age",
key: "age",
},
{
title: "Address",
dataIndex: "address",
key: "address",
},
{
title: "Select1",
dataIndex: "select1",
key: "select1",
},
{
title: "Select2",
dataIndex: "select2",
key: "select2",
},
{
title: "Action",
key: "action",
scopedSlots: { customRender: "action" },
},
];
const data = [
{
key: "1",
name: "张三",
age: 32,
address: "New York No. 1 Lake Park",
select1: "0",
select2: "0",
},
{
key: "2",
name: "李四",
age: 42,
address: "London No. 1 Lake Park",
select1: "0",
select2: "1",
},
{
key: "3",
name: "王五",
age: 32,
address: "Sidney No. 1 Lake Park",
select1: "0",
select2: "0",
},
];
export default {
data() {
return {
data,
visible: false,
columns,
form: {
name:"",
select1: "",
select2: "",
},
};
},
beforeCreate() {
this.form = this.$form.createForm(this, { name: "normal_login" });
},
methods: {
showModal(record) {
this.visible = true;
this.form = record;
this.form.resetFields();
},
handleSubmit() {
},
handleOk(e) {
console.log(e);
this.visible = false;
// 保存这条数据
console.log(this.dataform)
//查询整个表格
},
},
};
</script>