iview 可編輯表格與表格驗證

在日常的開發過程中，可編輯表格的應用場景還是很多的。在嘗試實現該功能時，發現沒有很便捷的實現方式，官方文檔也沒有具體案例；於是自己動手簡單寫了個demo 僅供參考

具體代碼如下所示 :

<template>
  <div style="padding:50px;">
    <Divider>
      <Button @click="addRow">Add Row</Button>
    </Divider>

    <Table ref="myTable" border :columns="columns" :data="data">
      <template slot="name" slot-scope="props">
        <Form :ref="'formDynamic'+props.idx" :model="props.row">
          <FormItem prop="name" :rules="{required: true, message: '請輸入稱呼', trigger: 'blur'}">
            <Input v-model="props.row.name" size="small"></Input>
          </FormItem>
        </Form>
      </template>

      <template slot="date" slot-scope="props">
        <DatePicker
          v-model="props.row.date"
          type="date"
          placeholder="Select date"
          style="width: 140px"
        ></DatePicker>
      </template>

      <!-- 操作 -->
      <template slot="action" slot-scope="props">
        <Poptip @on-ok="delRow(props.idx)" confirm title="Delete this item?" transfer>
          <Button type="warning" size="small">刪除</Button>
        </Poptip>
      </template>
    </Table>

    <div style="text-align:right;padding:8px 0;">
      <Button type="primary" @click="checkData">Check Data</Button>
    </div>

    <Divider>data</Divider>

    {{data}}
    <div style="display:none;">{{act}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      act: false, // 用於觸發渲染
      formDynamic: {},
      data: [],
      columns: [
        {
          title: "稱呼",
          key: "name",
          render: (h, params) => {
            this.data[params.index] = params.row;
            return h(
              "div",
              this.$refs.myTable.$scopedSlots.name({
                row: params.row,
                idx: params.row._index
              })
            );
          }
        },
        {
          title: "年齡",
          key: "age"
        },
        {
          title: "日期",
          key: "date",
          render: (h, params) => {
            this.data[params.index] = params.row;
            return h(
              "div",
              this.$refs.myTable.$scopedSlots.date({
                row: params.row,
                idx: params.row._index
              })
            );
          }
        },
        {
          title: "地址",
          key: "address"
        },
        {
          title: "操作",
          key: "action",
          render: (h, params) => {
            return h(
              "div",
              this.$refs.myTable.$scopedSlots.action({
                idx: params.row._index
              })
            );
          }
        }
      ]
    };
  },
  methods: {
    checkData() {
      console.log("checkData", this.$refs);

      for (let i = 0, len = this.data.length; i < len; i++) {
        this.$refs["formDynamic" + i].validate(valid => {
          if (valid) {
            // this.$Message.success('Success!')
          } else {
            // this.$Message.error('Fail!')
          }
        });
      }
    },
    /** 刪除行 */
    delRow(idx) {
      this.data.splice(idx, 1);
      this.$nextTick(() => {
        this.act = !this.act;
      });
    },
    /** 添加行 */
    addRow() {
      this.data.push({
        name: "",
        age: 18,
        date: "",
        address: "Beijing"
      });

      this.$nextTick(() => {
        this.act = !this.act;
      });
    }
  },
  mounted() {
    this.addRow();
  }
};
</script>
<style>
</style>