vue 小窗口

  所謂小窗口

 

 比如這個樣子的窗口,其實他和新彈出頁面沒有太大的區別 但是新的窗口需求在實際設計中也是很多的,

美觀簡潔 操作方便 不用跳轉 都是他的優點

以下是小窗口的簡單小栗子  內容不多 希望對您的設計有所幫助

<el-table-column
          label="操作"
          prop="id"
        >


          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="250"
              trigger="click"
            >
                <table class="chuna-alert-table">
                  <tr>
                    <td>訂單號:{{scope.row.order_number}}</td></tr>
                  <tr>
                    <td><textarea v-model="form.deposit_finance_remark" placeholder="add multiple lines"></textarea></td>
                  </tr>
                  <tr>
                    <td><textarea v-model="form.mc_deposit_money" placeholder="實際繳納擔保金額"></textarea></td>
                  </tr>
                  <tr>
                    <td colspan="2" @click="setDepositRatioConfirmation(scope.row.order_number)"><el-button>確定</el-button></td>
                  </tr>
                </table>
            <el-button slot="reference" type="primary">財務操作</el-button>
            </el-popover>
          </template>
        </el-table-column>