iview 可编辑表格与表格验证

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_44781409/article/details/99548687

在日常的开发过程中，可编辑表格的应用场景还是很多的。在尝试实现该功能时，发现没有很便捷的实现方式，官方文档也没有具体案例；于是自己动手简单写了个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>