前端--医院设置信息列表效果实现-html代码部分

1、使用element-ui表格样式

由于本前端模板框架主要是基于vue和element-ui实现的。并且在项目的main.js文件夹中已经引入了element-ui，如下所示：

所有我们在数据展示效果的地方主要使用element-ui技术。
element-ui表格效果展示

2、修改element-ui代码

<template>
    <div class="app-container">
        医院设置列表
        <el-table
            :data="list"
            stripe
            style="width: 100%">
            <el-table-column type="index" label="序号" width="50"/>
            <el-table-column prop="hosname" label="医院名称"/>
            <el-table-column prop="hoscode" label="医院编号"/>
            <el-table-column prop="apiUrl" label="api基础路径" width="200"/>
            <el-table-column prop="contactsName" label="联系人姓名"/>
            <el-table-column prop="contactsPhone" label="联系人手机"/>
            <el-table-column  label="状态" width="80">
                <!-- 表示找到整个表格 -->
                <template slot-scope="scope">
                    <!-- 表示找到表的中的每一行的status的值。如果该值为1，表格中此列显示值可用，否则显示不可用 -->
                    {{ scope.row.status === 1 ? '可用' : '不可用' }}
                </template>

            </el-table-column>
        </el-table>

    </div>
</template>

参数解释：