vue-element-admin开发教程(v4.0.0之后)

vue-element-admin开发教程(v4.0.0之后)的完整攻略

本文将详细讲解如何使用vue-element-admin进行开发，并提供两个示例说明。

步骤一：安装vue-element-admin

我们可以使用以下命令安装vue-element-admin：

npm install -g vue-cli
vue init PanJiaChen/vue-element-admin my-project
cd my-project
npm install
npm run dev

在上面的示例中，我们使用vue-cli创建了一个名为my-project的项目，并使用npm安装了vue-element-admin的依赖项。最后，我们使用npm运行了项目。

步骤二：使用vue-element-admin进行开发

我们可以使用vue-element-admin进行开发。以下是一个使用vue-element-admin进行开发的示例：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park'
        }
      ]
    }
  }
}
</script>

在上面的示例中，我们创建了一个名为tableData的数据，并使用el-table组件显示数据。具体来说，我们使用el-table-column组件定义了表格的列，并使用v-for指令循环显示数据。

示例一：使用vue-element-admin实现登录功能

以下是一个使用vue-element-admin实现登录功能的示例：

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="Username" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Password" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">Login</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$router.push({ path: '/' })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

在上面的示例中，我们使用el-form组件实现了登录表单，并使用v-model指令绑定了表单数据。我们还使用submitForm方法处理表单提交事件，并使用this.$router.push方法跳转到主页。

示例二：使用vue-element-admin实现表格编辑功能

以下是一个使用vue-element-admin实现表格编辑功能的示例：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
      <el-table-column label="Operation">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="Name" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="Age" prop="age">
          <el-input v-model="editForm.age"></el-input>
        </el-form-item>
        <el-form-item label="Address" prop="address">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="handleSave">Save</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park'
        }
      ],
      dialogVisible: false,
      editForm: {}
    }
  },
  methods: {
    handleEdit(index, row) {
      this.dialogVisible = true
      this.editForm = Object.assign({}, row)
    },
    handleSave() {
      const index = this.tableData.indexOf(this.editForm)
      Object.assign(this.tableData[index], this.editForm)
      this.dialogVisible = false
    }
  }
}
</script>

在上面的示例中，我们使用el-table组件显示数据，并使用el-table-column组件定义了表格的列。我们还使用el-button组件实现了编辑按钮，并使用el-dialog组件实现了编辑对话框。具体来说，我们使用handleEdit方法处理编辑按钮的点击事件，并使用handleSave方法处理保存按钮的点击事件。