項目有一個優化需求，原項目截圖如下：
這是一個輸入框，因為業務關系，被放到了表格裡邊，導緻整個輸入框很小，輸入資料時很不友善。
是以我想的一個優化方案是，當點選這個輸入框時，會彈出一個更大的輸入框，使用者可在這個彈出框裡輸入資料，然後再把這個彈出框的内容傳回這個小輸入框。
具體效果如下：
點選編輯按鈕之後，彈出如下框：
點選确定後，彈窗裡的内容同步到小框框裡。
具體實作方法：
小框框添加一個點選事件，點選之後打開彈窗：openDialog()
這個彈窗使用el-dialog元件，裡面存的是一個form表單，表單綁定一個對象，具體代碼如下：
<el-dialog title="請輸入資料源" :visible.sync="ifView">
<el-form v-model='inputObject'>
<el-input type="textarea" :rows="5" placeholder="請輸入内容" v-model="inputObject.data"></el-input>
</el-form >
<div slot="footer">
<el-button @click="cancel()" size="mini">取 消</el-button>
<el-button type="primary" @click="confirm()" size="mini">确 定</el-button>
</div>
</el-dialog>
這樣，輸入的内容就會綁定到inputObject的data屬性上，但是如何把這個值傳到原來的輸入框上呢，請教了一下我的導師，他說，隻需要把原輸入框的對象，指派給inputObject就可以了，這裡需要注意的是原輸入框的内容是綁定在rows對象的data屬性上的。
具體實作如下：
openDialog(rows){
this.ifView = true;
this.inputObject = rows;
},
這樣，根據vue的雙向資料綁定，rows上的data屬性會跟inputData上的data屬性變化。
原理如下：
vue具有雙向資料綁定的特性，是以，在彈窗上輸入值之後，inputObject上的data屬性會相應改變，因為el-input綁定的值是inputObject.data，那麼為什麼rows.data也會相應跟着改變呢，原因就是對象是引用類型， this.inputObject = rows; 這句語句隻是把rows的引用指派給inputObject，如下圖：
是以當修改inputObject裡的data值，rows裡的data值也會相應改變。
今天被導師嫌棄技術不好，難受，接下來要努力學習and工作了！！！