vue-admin-template 添加列表页面（数据是.json文件）-马育民老师

# 说明

效果如下图：

[![](/upload/0/0/1IX3HmegeeOo.png)](/upload/0/0/1IX3HmegeeOo.png)

# 执行流程

[![](/upload/0/0/1IX3HmhJVBf2.png)](/upload/0/0/1IX3HmhJVBf2.png)

# 代码：

创建文件：`src\views\patient\list.vue`

内容如下：
```
<template>
    <div>
        <el-row>
            <el-col :span="4"><el-button type="primary" plain>添加患者</el-button></el-col>
            <el-col :span="6"><el-input v-model="input" placeholder="姓名" prefix-icon="el-icon-search"></el-input></el-col>
            <el-col :span="4"><el-button type="primary" plain>查询</el-button></el-col>
        </el-row> 
        <el-table :data="tableData" border style="width: 98%">
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="idcard" label="身份证号" width="180" align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" width="60" align="center"></el-table-column>
            <el-table-column prop="address" label="住址"></el-table-column>
            <el-table-column label="住院日期" width="120" align="center" class="el-icon-time">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    {{ scope.row.date }}
                </template>
            </el-table-column>
            <el-table-column prop="source" label="感染来源" width="280"></el-table-column>
            <el-table-column label="操作" width="280" align="center">
                <el-button plain size="mini">编辑</el-button>
                <el-button type="primary" plain size="mini">检测记录</el-button>
                <el-button type="primary" plain size="mini">治愈</el-button>
            </el-table-column>
        </el-table>
    </div>
</template>

export default {
  data() {
    return {
      input: '',
      tableData: null
    }
  },
  created(){
      this.fetchData()
  },
  methods:{
      fetchData(){
          request({
             url: '../patient_list.json',
             method: 'get'
          }).then(response => {
             this.tableData = response.data
          })
      }
  }
}
</script>
```

# json数据

创建 `public\patient_list.json` 文件

内容如下：

```
{
    "code":20000,
    "data":[{
        "date": "2016-05-02",
        "name": "王小虎",
        "idcard": "123456789012345678",
        "address": "上海市普陀区金沙江路 1518 弄",
        "gender": "男",
        "source": "菜市场"
      }, {
        "date": "2016-05-02",
        "name": "王小虎",
        "idcard": "123456789012345678",
        "address": "上海市普陀区金沙江路 1518 弄",
        "gender": "男",
        "source": "菜市场"
      }, {
        "date": "2016-05-02",
        "name": "王小虎",
        "idcard": "123456789012345678",
        "address": "上海市普陀区金沙江路 1518 弄",
        "gender": "男",
        "source": "菜市场"
      }]
}
```

原文出处：/show_1IX3HmiJsxQ6.html