5-6

src/components/MainPage/Quarter.vue

@@ -67,7 +67,7 @@ table{
       placeholder="选择年"
       @change="getPlanList">
     </el-date-picker>
-    <el-button type="primary" @click="visibleChange = true;">新增季度计划</el-button>
+    <el-button type="primary" @click="visibleChange = true;noEdit = false;plan = {};">新增季度计划</el-button>
   </div>
   <table>
     <thead>
@@ -78,7 +78,7 @@ table{
                 <th>年份</th>
                 <th style="width:50px">季度</th>
                 <th>简要说明</th>
-                <th style="width:150px">操作</th>
+                <th style="width:120px">操作</th>
             </tr>
         </thead>
         <tbody>
@@ -92,13 +92,13 @@ table{
               <td>
                 <a @click="changeData(item,true)">详情</a>
                 &nbsp;&nbsp;
-                <a @click="changeData(item)">修改</a>
+                <a @click="changeData(item,false)">修改</a>
                 &nbsp;&nbsp;
-                <a @click="changeData(item)">子项</a>
+                <a @click="table = true">子项</a>
                 &nbsp;&nbsp;
                 <a @click="visibleDelete = true;plan.id = item.id">删除</a>
-                &nbsp;&nbsp;
-                <a>完成</a>
+                <!-- &nbsp;&nbsp;
+                <a>完成</a> -->
               </td>
             </tr>
         </tbody>
@@ -110,19 +110,20 @@ table{
         width="500px">
         <div>
           <label>名称：</label>
-          <el-input name="name" v-model="plan.name" placeholder="请输入名称" required="required"></el-input>
+          <el-input name="name" v-model="plan.name" placeholder="请输入名称" required="required" :disabled="noEdit"></el-input>
         </div>
         <div>
           <label>年份：</label>
           <el-date-picker
             v-model="yearData"
             type="year"
-            placeholder="选择年">
+            placeholder="选择年"
+            :disabled="noEdit">
           </el-date-picker>
         </div>
         <div>
           <label>季度：</label>
-          <el-select v-model="plan.quarter" placeholder="请选择">
+          <el-select v-model="plan.quarter" placeholder="请选择" :disabled="noEdit">
             <el-option
               v-for="item in quarterOptions"
               :key="item.value"
@@ -133,11 +134,11 @@ table{
         </div>
         <div>
           <label>内容：</label>
-          <el-input v-model="plan.content" placeholder="请输入内容" required="required"></el-input>
+          <el-input v-model="plan.content" placeholder="请输入内容" required="required" :disabled="noEdit"></el-input>
         </div>
         <span slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="change">确 定</el-button>
-            <el-button type="primary" @click="visibleChange = false;plan={}">取消</el-button>
+            <el-button type="primary" @click="change" v-if="!noEdit">确 定</el-button>
+            <el-button type="primary" @click="visibleChange = false;plan={}" v-if="!noEdit">取消</el-button>
         </span>
     </el-dialog>
     <el-dialog
@@ -150,6 +151,17 @@ table{
         <el-button type="primary" @click="deletePlan">确 定</el-button>
       </span>
     </el-dialog>
+    <el-drawer
+      title="我嵌套了表格!"
+      :visible.sync="table"
+      direction="rtl"
+      size="50%">
+      <el-table :data="gridData">
+          <el-table-column property="date" label="日期" width="150"></el-table-column>
+          <el-table-column property="name" label="姓名" width="200"></el-table-column>
+          <el-table-column property="address" label="地址"></el-table-column>
+        </el-table>
+    </el-drawer>
 </div>
 </template>
 
@@ -171,7 +183,26 @@ export default {
         },
         visibleChange: false,
         visibleDelete: false,
-        noEdit: false
+        noEdit: false,
+         table: false,
+      dialog: false,
+      gridData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }],
       }
   },
   created() {