Vue + jquery 實現表格指定列的文字收縮

效果很簡單，可是寫起來真的不容易，由於Vue對於沒有React這種前端框架經驗的人是不友好的
（少吐槽，多工做，省下時間出去hi）

先說一下我走過的彎路：我之間想經過 v-if 指令去操做這一列
代碼是這樣的：

<el-table-column width="250" align="center" label="比較基準">
  <template scope="scope">
    <span v-if="isAllTxt">{{getShortStr(scope.row.benchmark)}}</span>
    <span v-else>{{scope.row.benchmark}}</span>
    <i @click="changeTxt" style="margin-left:8px;color: #20a0ff;" class="el-icon-more"></i>
  </template> 
</el-table-column>

changeTxt 方法去改變 isAllTxt這個boolean 從而達到控制長短文字的顯示

額，而後每次點擊任意一行，這一列全部的文字都改變了
呃呃呃，這樣產品絕對不會答應的，你覺得是上課全體起立麼？？？

好，咱們用原來jquery時代開發的經驗，在點擊事件中傳入 $(this) ，手動改dom
（前提是項目配置了jquery，請轉頭看：http://www.javashuo.com/article/p-muaxljcd-hk.html，上去，本身動。哦不，本身動手把它配好）
changeTxt($(this))

changeTxt(ref) {
    ref.text(XXX);
}

結果固然是錯誤：

那底下就有同窗說是否是jquery導錯了？？？
固然也不是，這裏的 this 並非 dom 的 this，是vue的vm對象，不信的能夠在方法中用jquery的 $ 試一下，並非jquery的鍋。

那又有愛思考的小夥伴說我用直接用 this 能夠麼 ？
changeTxt(this)

獲得的並非當前元素的對象，這條路又不通。

那vue中是怎麼獲得元素的對象的呢？？？
給元素定義 ref

<span ref="txt">{{getShortStr(scope.row.benchmark)}}</span>

方法中經過 this.$refs['txt'].text(XXX) 改變dom，嗯？

引用返回的是什麼 ？？？ 無法操做啊 ，並且返回的這個標籤是表格最後一行的數據，哇，亂七八糟，爆炸。

無奈，只能經過最笨的方法，給咱們的 span 定義 id ，並且是不一樣的 id ,用 jquery 獲取 id 對應的元素

<el-table-column width="250" align="center" label="比較基準"> 
  <template scope="scope">
     <span :id="scope.row.id">{{getShortStr(scope.row.benchmark)}}</span>
    <i v-if="scope.row.benchmark.length>20" @click="changeTxt(scope.row.benchmark,scope.row.id)" style="margin-left:8px;color: #20a0ff;" class="el-icon-more">
    </i>
  </template>
</el-table-column>

// changeTxt方法：
   changeTxt(txt,id) {
      this.isAllTxt = !this.isAllTxt;
      if(this.isAllTxt){
        $('#'+id).text(txt);
      }else{
        $('#'+id).text(this.getShortStr(txt));
      }
    }

// getShortStr 方法
getShortStr(txt_origin) {
  if(txt_origin.length > 20){
    return txt_origin.substring(0,20);
  }else{
    return txt_origin;
  }
}

搞定是搞定了，可是 jquery 和 vue 的風格是不同的，混用體驗並非很好，有好的方法請必定留言告訴我，一定送上一句 謝謝 ！！！