【vue】avue-crud行编辑

【vue】avue-crud行编辑

1.vue页面代码

<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>

2.示例图片

链接: https://www.avuejs.com/doc/crud/crud-cell.