• 1111


      <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>
  • 相关阅读:
    Java并发之ThreadPoolExecutor
    Java并发之同步工具类
    em和i , b和Strong 的区别
    OS应用架构谈(二):View层的组织和调用方案(中)
    iOS应用架构谈(二):View层的组织和调用方案(上)
    java(List或Array数组)求交集、并集、差集, 泛型工具类
    AES/DES 可逆性加密算法 -- java工具类
    用xtrabackup实现mysql的主从复制 阿里云rds到自己创建mysql
    java 生成二维码工具
    XDU 1022 (数论筛法+前缀和)
  • 原文地址:https://www.cnblogs.com/bluekang/p/15795233.html
Copyright © 2020-2023  润新知