使用Element进行前端开发的详细图文教程

{
    path: '/todo',
    component: Layout,
    redirect: '/todo/index',
    hidden: false,
    children: [
      {
        path: 'index',
        component: () =＞ import('@/views/todo/index'),
        name: 'Profile',
        meta: { title: '任务列表', icon: 'list', noCache: true }
      }
    ]
  }

<template></template>
  <div class="app-container"></div>
    <h1></h1>{{ title }}</h1></h1>
  </div>
  </template>
<script></script>
export default {
  name: 'Todo',
  data() {
    return {
      title: '任务列表'
    }
  }
}
</script>

   <el-button type="primary" @click="createTask">创建任务</el-button>

  <el-table
            :data="tableData"
            border
            style="width: 100%;">
            <el-table-column
              fixed
              prop="name"
              label="任务名称"
              width="100">
            </el-table-column>
            <el-table-column
              prop="desc"
              label="任务描述"
              width="400">
            </el-table-column>
            <el-table-column
              prop="start_time"
              label="开始时间"
              width="150">
            </el-table-column>
            <el-table-column
              prop="end_time"
              label="结束时间"
              width="150">
            </el-table-column>
            <el-table-column
              prop="assign"
              label="执行人"
              width="120">
            </el-table-column>
            <el-table-column
              prop="status"
              label="任务状态"
              width="120">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="60">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="editTask(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>

  <el-table-column
              fixed="right"
              label="操作"
              width="60">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="editTask(scope.row)">编辑</el-button>
              </template>
            </el-table-column>

export default {
  name: 'Todo',
  data() {
    return {
      ...
      fORM: {
        'name': '',
        'desc': '',
        'start_time': '',
        'end_time': '',
        'assign': '',
        'status': ''
      }
    }
  },
  methods: {
    createTask () {
      this.title = '创建任务';
      this.drawer = true;
      this.form = {};
    },
    editTask (row) {
      this.title = '编辑任务';
      this.drawer = true;
      this.form = row;
    },
    onSubmit() {
      console.log('submit!');
    }
  }
}

import request from '@/utils/request'
export function submit (data) {
  return request({
    url: '/api/todo',
    method: 'post',
    headers: {
      'Content-Type': 'application/JSON'
    },
    data
  })
}

<script>
import {submit} from '@/api/todo'
…
    onSubmit () {
      submit(this.form).then((response)=>{
        if (response.code === 0) {
          this.$message({
            showClose: true,
            message: '保存成功！',
            type: 'success'
          });
        }
      })
    }
</script>

export function pullData (par) {
  return request({
    url: '/api/todo',
    method: 'get',
    params: par
  })
}

    getTaskList (tab) {
      pullData({tab: tab}).then((response)=＞{
        if (response.code === 0) {
          this.tableData = response.data;
        }
      })
    }

mounted() {
    this.getTaskList(this.activeTab)
  },