<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ele-table</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/1.4.2/theme-default/index.css"><!--elementui required-->
<!--按需引入 自定义主题css ↓↓↓-->
<link rel="stylesheet" href="../../css/elementUi/button.css">
<link rel="stylesheet" href="../../css/elementUi/pagination.css">
<link rel="stylesheet" href="../../css/elementUi/date-picker.css">
<!--按需引入↑↑↑-->
<link rel="stylesheet" href="../../css/ele-page-common.css"><!--page common required-->
<script src="../../libs/vue.min.js"></script><!--vue.js required-->
<script src="https://cdn.bootcss.com/element-ui/1.4.2/index.js"></script><!--element-ui required-->
<script src="../../plugins/vue/vue-resource.min.js"></script><!--vue-resource http required-->
<script src="../../js/vue-page-common.js"></script><!--vue相关配置 required-->
</head>
<body>
<div id="app" v-cloak>
<div class="table-list" v-show="isShow">
<div class="el-row">
<el-button v-if="hasPermission('student:save')" type="primary" @click="add" ><i class="el-icon-plus"></i> 新增</el-button>
<el-button v-if="hasPermission('student:update')" type="primary" @click="edit"><i class="el-icon-edit"></i> 修改</el-button>
<el-button v-if="hasPermission('student:delete')" type="danger" @click="del"><i class="el-icon-delete"></i> 删除</el-button>
</div>
<el-table ref="multipleTable" :data="tableData" :default-sort = "{prop: 'applyDate', order: 'descending'}" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" min-width="55" >
</el-table-column>
<el-table-column prop="name" label="姓名" min-width="180" sortable>
</el-table-column>
<el-table-column prop="gender" label="性别" min-width="80" sortable :formatter="formatterSex">
</el-table-column>
<el-table-column prop="birthday" label="出生日期" min-width="120" sortable>
</el-table-column>
<el-table-column prop="applyDate" label="报名日期" min-width="120" sortable>
</el-table-column>
<el-table-column prop="address" label="地址" min-width="120" show-overflow-tooltip sortable>
</el-table-column>
</el-table>
<div class="page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageInf.currPage"
:page-sizes="[10, 20, 30]"
:page-size="pageInf.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageInf.totalCount">
</el-pagination>
</div>
</div>
<div class="input-group" v-show="!isShow">
<div class="ele-row ele-row-title" v-html="html"></div>
<div class="ele-row ele-row-content">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名" prop="name" :rules="[
{ required: true, message: '姓名不能为空'}
]">
<el-col :span="12">
<el-input v-model="form.name" placeholder="输入学员姓名"></el-input>
</el-col>
</el-form-item>
<el-form-item label="出生日期">
<el-col :span="12">
<el-date-picker type="date" placeholder="出生日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="家庭住址">
<el-col :span="12">
<el-input v-model="form.address" placeholder="输入家庭住址"></el-input>
</el-col>
</el-form-item>
<el-form-item label="入学日期">
<el-col :span="12">
<el-date-picker type="date" placeholder="入学日期" v-model="form.applyDate" style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">保存</el-button>
<el-button type="warning" @click="cancel">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
<script src="../../js/modules/own/own.js"></script><!--本页js-->
</body>
</html>
vue+elementui_table+vue-resource.rar （9个子文件） 
vue+elementui_table+vue-resource css 
button.css 7KB date-picker.css 17KB ele-page-common.css 548B pagination.css 14KB html 
own.html 5KB js vue-resource.min.js 15KB vue-page-common.js 1KB vue.min.js 75KB own.js 6KB
- 1
- 2
前往页