diff --git a/public/json/list.json b/public/json/list.json
new file mode 100644
index 00000000..2995eed9
--- /dev/null
+++ b/public/json/list.json
@@ -0,0 +1,31 @@
+{
+	"code": 200,
+	"count": 85,
+	"data": [
+		{
+			"id": "1",
+			"name": "Sakuya",
+			"audit": "1",
+			"date": "2021-04-01 13:56:38",
+			"yx": "81883387@qq.com",
+			"progress": 89.5
+		},
+		{
+			"id": "2",
+			"name": "John Martinez",
+			"audit": "1",
+			"date": "2020-10-14 17:21:20",
+			"yx": "k.luhkpev@zdgtfd.ma",
+			"progress": 65.5
+		},
+		{
+			"id": "3",
+			"name": "Karen Miller",
+			"audit": "0",
+			"date": "2020-07-05 09:30:00",
+			"yx": "h.hgvwmw@xjuf.pa",
+			"progress": 65.5
+		}
+	],
+	"message": ""
+}
diff --git a/src/api/index.js b/src/api/index.js
index 1e9c10a5..6cc30afa 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -26,6 +26,15 @@ const api = {
 			get: async function(data){
 				return await http.get(this.url, data);
 			}
+		},
+		demolist: {
+			list: {
+				url: `${config.apiUrl}/json/list.json`,
+				name: "列表数据",
+				get: async function(data){
+					return await http.get(this.url, data);
+				}
+			}
 		}
 	}
 }
diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue
index e3e60f01..2056b978 100644
--- a/src/components/scTable/index.vue
+++ b/src/components/scTable/index.vue
@@ -1,21 +1,21 @@
 <template>
-	<div class="scTable">
+	<div class="scTable" ref="scTableMain" v-loading="loading">
 		<div class="scTable-table">
-			<el-table :data="tableData" ref="scTable" height="100%">
-				<el-table-column type="selection" width="50"></el-table-column>
-				<el-table-column label="ID" prop="id" width="80"></el-table-column>
-				<el-table-column label="显示名称" prop="name" width="200"></el-table-column>
-				<el-table-column label="类型" prop="type"></el-table-column>
-				<el-table-column label="操作" fixed="right" width="100">
-					<template #default="scope">
-						<el-button @click="table_show(scope.row)" type="text" size="small">查看</el-button>
-						<el-button @click="table_show(scope.row)" type="text" size="small">编辑</el-button>
-					</template>
-				</el-table-column>
+			<el-table :data="tableData" ref="scTable" :height="tableHeight" stripe highlight-current-row
+				@selection-change="selectionChange"
+			>
+				<slot></slot>
+				<template #empty>
+					<el-empty description="暂无数据" :image-size="100"></el-empty>
+				</template>
 			</el-table>
 		</div>
 		<div class="scTable-page">
-			<el-pagination background :small="true" layout="total, prev, pager, next, jumper" :total="1000"></el-pagination>
+			<el-pagination background :small="true" layout="total, prev, pager, next, jumper" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
+			<div>
+				<el-button @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
+				<el-button @click="setting" icon="el-icon-setting" circle style="margin-left:15px"></el-button>
+			</div>
 		</div>
 	</div>
 </template>
@@ -23,28 +23,63 @@
 <script>
 	export default {
 		name: 'scTable',
-		props: {},
+		props: {
+			apiObj: { type: Object, default: () => {} },
+			//apiObj: { type: String, default: "" },
+		},
 		data() {
 			return {
-				tableData:[
-					{
-						id: 1,
-						name: "sakuya",
-						type: 1
-					},
-					{
-						id: 2,
-						name: "Ali",
-						type: 21
-					}
-				]
+				tableData: [],
+				pageSize: 20,
+				total: 0,
+				currentPage: 1,
+				loading: false,
+				tableHeight:'100%'
 			}
 		},
+		created() {
+			this.$nextTick(() => {
+				this.upTableHeight()
+			})
+		},
 		mounted() {
-
+			this.getData();
+			window.onresize = () => {
+				this.upTableHeight()
+			}
 		},
 		methods: {
+			//更新表格高度
+			upTableHeight(){
+				this.tableHeight = (this.$refs.scTableMain.offsetHeight - 50 ) + "px"
+			},
+			//获取数据
+			async getData(page=1){
+				this.loading = true;
+				var reqData = {
+					page: page
+				}
+				var res = await this.apiObj.get(reqData);
+				this.tableData = res.data;
+				this.total = res.count;
+				this.loading = false;
+			},
+			//分页点击
+			reload(page){
+				this.getData(page);
+			},
+			//刷新数据
+			refresh(){
+				this.getData(this.currentPage);
+			},
+			//表格设置
+			setting(){
 
+			},
+			//转发原装方法&事件
+			selectionChange(selection){
+				this.$emit('selection-change', selection)
+			}
 		}
 	}
 </script>
@@ -52,5 +87,5 @@
 <style scoped>
 	.scTable {display:flex;flex-direction:column;height:100%;}
 	.scTable-table {flex:1;}
-	.scTable-page {height:50px;}
+	.scTable-page {margin-top: 20px;height:50px;display: flex;align-items: center;justify-content: space-between;}
 </style>
diff --git a/src/style/style.less b/src/style/style.less
index 75983473..13775650 100644
--- a/src/style/style.less
+++ b/src/style/style.less
@@ -96,5 +96,5 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;}
 .el-footer {background: #fff;border-top: 1px solid #e6e6e6;padding:13px 15px;}
 .el-main {padding:15px;}
-.el-pagination {margin-top: 20px;}
 .el-drawer__body {overflow: auto;}
+.el-popconfirm__main {margin: 14px 0;}
diff --git a/src/views/template/normallist.vue b/src/views/template/normallist.vue
index 1fba63b8..fe42c2df 100644
--- a/src/views/template/normallist.vue
+++ b/src/views/template/normallist.vue
@@ -1,15 +1,73 @@
 <template>
 	<el-container>
 		<el-header>
-			<el-button type="primary" icon="el-icon-plus">新增</el-button>
-			<el-button type="danger" icon="el-icon-delete"></el-button>
+			<el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
+			<el-popconfirm :title="'确定删除选中的 '+selection.length+' 项吗？'" @confirm="batch_del">
+				<template #reference>
+					<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button>
+				</template>
+			</el-popconfirm>
 		</el-header>
 		<el-main>
 			<el-card shadow="never" class="scTable-card" body-style="height:100%">
-				<scTable></scTable>
+				<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange">
+					<!-- 表格列开始 -->
+					<el-table-column type="selection" width="50"></el-table-column>
+					<el-table-column label="序号" type="index" width="50"></el-table-column>
+					<el-table-column label="头像" width="60">
+						<template #default="scope">
+							<el-avatar size="small">{{ scope.row.name.substring(0,1) }}</el-avatar>
+						</template>
+					</el-table-column>
+					<el-table-column label="名称" prop="name" width="150"></el-table-column>
+					<el-table-column label="进度" prop="progress" width="200">
+						<template #default="scope">
+							<el-progress :percentage="scope.row.progress" status="success"></el-progress>
+						</template>
+					</el-table-column>
+					<el-table-column label="邮箱" prop="yx" align="right" width="150"></el-table-column>
+					<el-table-column label="状态" prop="audit" width="100"></el-table-column>
+					<el-table-column label="加入时间" prop="date" min-width="300"></el-table-column>
+					<el-table-column label="操作" fixed="right" width="120">
+						<template #default="scope">
+							<el-button @click="table_show(scope.row, scope.$index)" type="text" size="small">查看</el-button>
+							<el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
+							<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.$index)">
+								<template #reference>
+									<el-button type="text" size="small">删除</el-button>
+								</template>
+							</el-popconfirm>
+						</template>
+					</el-table-column>
+					<!-- 表格列结束 -->
+				</scTable>
 			</el-card>
 		</el-main>
 	</el-container>
+
+	<!-- 弹窗开始 -->
+	<el-dialog :title="titleMap[dialogMode]" :width="400" v-model="showDialog" :before-close="closeDialog" append-to-body>
+		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px">
+			<el-form-item label="名称" prop="name">
+				<el-input v-model="form.name"></el-input>
+			</el-form-item>
+			<el-form-item label="邮箱" prop="yx">
+				<el-input v-model="form.yx"></el-input>
+			</el-form-item>
+			<el-form-item label="进度" prop="progress">
+				<el-slider v-model="form.progress"></el-slider>
+			</el-form-item>
+			<el-form-item label="状态" prop="audit">
+				<el-switch v-model="form.audit" active-value="1" inactive-value="0"></el-switch>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="closeDialog">取 消</el-button>
+			<el-button v-if="dialogMode=='add'" type="primary" @click="submitForm()">创 建</el-button>
+			<el-button v-if="dialogMode=='edit'" type="primary" @click="editForm()">保 存</el-button>
+		</template>
+	</el-dialog>
+	<!-- 弹窗结束 -->
 </template>
 
 <script>
@@ -22,7 +80,101 @@
 		},
 		data() {
 			return {
+				apiObj: this.$API.demo.demolist.list,
+				selection: [],
+				showDialog: false,
+				dialogMode: "add",
+				editIndex: null,
+				titleMap: {
+					add: "新增",
+					edit: "编辑",
+					show: "查看"
+				},
+				form: {
+					name: "",
+					audit: "1",
+					yx: "",
+					progress: 0
+				},
+				rules: {
+					name: [
+						{ required: true, message: '请输入名称' },
+					],
+					yx: [
+						{ required: true, message: '请输入完整的邮箱地址' },
+					]
+				}
+			}
+		},
+		mounted() {
 
+		},
+		methods: {
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+			//行删除
+			table_del(index){
+				this.$refs.table.tableData.splice(index, 1);
+			},
+			//批量删除
+			batch_del(){
+				var _this = this;
+				_this.selection.forEach(function (item) {
+					_this.$refs.table.tableData.forEach(function (itemI, indexI) {
+						if (item.id === itemI.id) {
+							_this.$refs.table.tableData.splice(indexI, 1)
+						}
+					})
+				})
+			},
+			//关闭弹窗
+			closeDialog(){
+				this.showDialog = false;
+				this.$nextTick(() => {
+					this.$refs.dialogForm.resetFields();
+				})
+			},
+			//打开弹窗
+			openDialog(mode){
+				this.dialogMode = mode;
+				this.showDialog = true;
+			},
+			//新增提交
+			submitForm(){
+				this.$refs.dialogForm.validate((valid) => {
+					if (valid) {
+						var newData = {
+							...this.form,
+							id: new Date().getTime(),
+							date: "2021-04-30 13:57:00"
+						}
+						this.$refs.table.tableData.push(newData)
+						this.closeDialog();
+					}else{
+						return false;
+					}
+				})
+			},
+			//编辑
+			table_edit(row, index){
+				this.editIndex = index;
+				this.openDialog('edit');
+				this.$nextTick(() => {
+					this.form = {...row}
+				});
+			},
+			//编辑提交
+			editForm(){
+				this.$refs.dialogForm.validate((valid) => {
+					if (valid) {
+						Object.assign(this.$refs.table.tableData[this.editIndex], this.form)
+						this.closeDialog();
+					}else{
+						return false;
+					}
+				})
 			}
 		}
 	}
diff --git a/src/views/userCenter/index.vue b/src/views/userCenter/index.vue
index 1dba0c8c..f17dab8d 100644
--- a/src/views/userCenter/index.vue
+++ b/src/views/userCenter/index.vue
@@ -41,6 +41,7 @@
 							<el-form ref="form" :model="form" label-width="80px" style="width: 460px;margin-top:20px;">
 								<el-form-item label="账号">
 									<el-input v-model="form.user" disabled></el-input>
+									<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>
 								</el-form-item>
 								<el-form-item label="姓名">
 									<el-input v-model="form.name"></el-input>