【vue】avue-crud行编辑

一、失焦保存

1.1 双击失焦保存效果图

1.2 双击失焦保存示例

<template>
  <div class="app-container pull-height words">
    <avue-crud
      ref="crud"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @row-update="handleUpdate"
      @row-dblclick="handleRowDBLClick">
    </avue-crud>
  </div>
</template>

<script>
import option from "./test";

export default {
  name: "menu",
  data() {
    return {
      addForm: {},
      tableLoading: false,
      tableData: [
        {
          id: 0,
          name: '张三'
        },
        {
          id: 1,
          name: '李四'
        }
      ],
      tableOption: option,
    };
  },
  created() {
  },
  mounted() {
    window.handleBlur = this.handleBlur
  },
  methods: {
    handleBlur(value){
      console.log(value)
      this.$refs.crud.rowCell(this.addForm, this.addForm.$index)
    },
    handleRowDBLClick(row, column, cell, event) {
      this.addForm = row
      console.log(row)
      this.$refs.crud.rowCell(row, row.$index)
    },
    handleUpdate(row, index, done, loading) {
      this.$message({
        showClose: true,
        message: "修改成功",
        type: "success",
      });
      done();
    }
  },
};
</script>
<style lang="scss" scoped>
</style>

export default {
  delBtn: false,
  addBtn: false,
  editBtn: false,
  addRowBtn: true,
  cellBtn: false,
  cancelBtn: false,
  menu: false,
  column: [
    {
      label: '姓名',
      prop: 'name',
      cell: true,
      rules: [
        {
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }
      ],
      blur: (value) => window.handleBlur(value)
    }
  ]
};

二、按钮保存

2.1 按钮保存效果图

2.2 按钮保存示例

<template>
  <avue-crud ref="crud" :option="option" :data="data" @row-update="rowUpdate">
    <template slot-scope="{row,index}" slot="menu">
      <el-button type="primary" icon="el-icon-edit" size="small" v-if="!row.$cellEdit" @click="rowCell(row,index)" circle></el-button>
      <el-button type="success" icon="el-icon-check" size="small" v-else @click="rowCell(row,index)" circle></el-button>
      <el-button type="warning" icon="el-icon-close" size="small" v-if="row.$cellEdit" @click="rowCancel(row,index)" circle></el-button>
    </template>
  </avue-crud>
</template>

<script>

export default {
  name: 'demo.vue',
  data() {
    return {
      drawer: false,
      nodes: [],
      openId: [],
      openTitle: '',
      openData: {},
      data: [
        {
          id: 0,
          name: '张三'
        },
        {
          id: 1,
          name: '李四'
        }
      ],
      option: {
        delBtn: false,
        addBtn: false,
        editBtn: false,
        addRowBtn: true,
        cellBtn: false,
        cancelBtn: false,
        column: [
          {
            label: '姓名',
            prop: 'name',
            cell: true,
            rules: [
              {
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
              }
            ]
          }
        ]
      }
    }
  },
  methods: {
    rowCell(row, index) {
      this.$refs.crud.rowCell(row, index)
    },
    rowCancel(row, index) {
      this.$refs.crud.rowCancel(row, index)
    },
    rowUpdate(form, index, done) {
      // 更新操作
      this.$message.success(
        '编辑数据' + JSON.stringify(form) + '数据序号' + index
      )
      done()
    }
  }
}
</script>