diff --git a/src/components/drawers/AddOnline.vue b/src/components/drawers/AddOnline.vue
index 9bf68249..0fd2359f 100644
--- a/src/components/drawers/AddOnline.vue
+++ b/src/components/drawers/AddOnline.vue
@@ -65,7 +65,36 @@
                     </div>
                 </div>
                 <div class="main_table">
-                    <a-table :row-selection="rowSelection" :columns="columns1" :data-source="tableData1"></a-table>
+                    <a-table class="ant-table-striped" 
+                        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" 
+                        :row-selection="rowSelection" 
+                        :columns="columns1" 
+                        :data-source="tableData1"
+                        :loading="tableDataTotal === -1 ? true : false"
+                        :pagination="{
+                            showSizeChanger: true,
+                            showQuickJumper: true,
+                            hideOnSinglePage: true,
+                            pageSizeOptions: [],
+                            pageSize: pageSize,
+                            current: currentPage,
+                            total: tableDataTotal,
+                            onChange: (page, pageSize) => {
+                            currentPage = page;
+                            // console.log('page', page)
+                            // 加翻页查找代码
+                            // 	this.setState({
+                            // 		currentPage: page,
+                            // 	}, () => {
+                            // 		this.getMilitaryDeployment()
+                            // 	})
+                            },
+                        }"
+                    />
+                </div>
+                <div class="main_btns">
+                    <button class="btn1">取消</button>
+                    <button class="btn2">确定</button>
                 </div>
             </div>
         </div>
@@ -82,20 +111,59 @@ import { reactive, toRefs, ref } from "vue";
     const columns1 = [
         {
             title: "课程编号",
-            width: 100,
+            width: '20%',
             dataIndex: "num",
             key: "num",
             align: "center",
         },
         {
             title: "名称",
-            width: 200,
+            width: '20%',
             dataIndex: "name",
             key: "name",
-            ellipsis: true,
+            align: "center",
+        },
+        {
+            title: "内容分类",
+            width: '13%',
+            dataIndex: "content",
+            key: "content",
+            align: "center",
+        },
+        {
+            title: "授课教师",
+            width: '13%',
+            dataIndex: "teacher",
+            key: "teacher",
+            align: "center",
+        },
+        {
+            title: "创建人",
+            width: '13%',
+            dataIndex: "creator",
+            key: "creator",
+            align: "center",
+        },
+        {
+            title: "完成时间",
+            width: '20%',
+            dataIndex: "time",
+            key: "time",
             align: "center",
         },
     ]
+    const rowSelection = ref({
+        checkStrictly: false,
+        onChange: (selectedRowKeys, selectedRows) => {
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        },
+        onSelect: (record, selected, selectedRows) => {
+            console.log(record, selected, selectedRows);
+        },
+        onSelectAll: (selected, selectedRows, changeRows) => {
+            console.log(selected, selectedRows, changeRows);
+        },
+    });
     export default {
         name: "AddOnline",
         props: {
@@ -107,11 +175,91 @@ import { reactive, toRefs, ref } from "vue";
     setup(props, ctx) {
         const state = reactive({
             tableData1: [
-                    {
-                key: "1",
-                num: 1,
+                {
+                    key: "1",
+                    num: 'JDF2022071100001',
+                    name:'时间管理课程',
+                    content:'通用力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
                 },
-            ]
+                {
+                    key: "2",
+                    num: 'JDF2022071100001',
+                    name:'管理能力课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "3",
+                    num: 'JDF2022071100001',
+                    name:'快速换模SMED',
+                    content:'通用力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "4",
+                    num: 'JDF2022071100001',
+                    name:'巧妙对话人见人夸',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "5",
+                    num: 'JDF2022071100001',
+                    name:'管理能力课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "6",
+                    num: 'JDF2022071100001',
+                    name:'时间管理课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "7",
+                    num: 'JDF2022071100001',
+                    name:'时间管理课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "8",
+                    num: 'JDF2022071100001',
+                    name:'时间管理课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+                {
+                    key: "9",
+                    num: 'JDF2022071100001',
+                    name:'时间管理课程',
+                    content:'领导力',
+                    teacher:'BOE教师',
+                    creator:'管理员',
+                    time:'2022-10-31 23:12:00',
+                },
+            ],
+            currentPage: 1,
+            tableDataTotal: 100,
+            pageSize: 10,
         });
         const closeDrawer = () => {
             ctx.emit("update:addonlineVisible", false);
@@ -129,12 +277,16 @@ import { reactive, toRefs, ref } from "vue";
             closeDrawer,
             options1,
             columns1,
+            rowSelection,
             // change,
         };
     },
 };
 </script>
 <style lang="scss">
+.ant-table-striped :deep(.table-striped) td {
+  background-color: #fafafa !important;
+}
 .drawerStyle {
     .drawerMain {
         .header {
@@ -253,6 +405,36 @@ import { reactive, toRefs, ref } from "vue";
                     cursor: pointer;
                 }
             }
+            .main_btns{
+                height: 72px;
+                width: 100%;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+                .btn1 {
+                    width: 100px;
+                    height: 40px;
+                    border: 1px solid #4ea6ff;
+                    border-radius: 8px;
+                    color: #4ea6ff;
+                    background-color: #fff;
+                    cursor: pointer;
+                }
+                .btn2 {
+                    cursor: pointer;
+                    width: 100px;
+                    height: 40px;
+                    background: #4ea6ff;
+                    border-radius: 8px;
+                    border: 0;
+                    margin-left: 15px;
+                    color: #fff;
+                }
+            }
         }
     }
 }