zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    C#经典书籍推荐 [转]
    ubuntu的ADSL拨号上网(主要是无线网情况下) [转]
    2007元旦粤北山区:我的“多背1公斤”
    Javascript中给动态生成的表格添加样式,JavaScript里setAttribute的问题
    Asp.net2.0的AjaxPro中不能使用Server.HtmlEncode()函数?
    去了深圳出差,到了珠海泡温泉
    2007元旦粤北山区:翻山越岭到乳源,半途而废云门寺,风雨兼程向瑶山
    很好很强大的FLEX控件
    PHP生成PDF文档的FPDF类
    Flex,事件,绑定,机制
  • 原文地址:https://www.cnblogs.com/bluekang/p/15795233.html
Copyright © 2011-2022 走看看