Vue+jquery를 사용하여 테이블의 지정된 열에서 텍스트를 축소하는 방법

이 기사에서는 테이블의 특정 열에서 텍스트 축소를 구현하는 Vue+jquery의 샘플 코드를 주로 소개합니다.

이 기사에서는 테이블의 지정된 열의 텍스트 축소를 구현하기 위한 Vue+jquery의 샘플 코드를 소개합니다. 자세한 내용은 다음과 같습니다.

효과는 매우 간단합니다. , 하지만 Vue는 React에 적합하지 않기 때문에 작성하기가 정말 쉽지 않습니다. 프론트엔드 프레임워크 경험이 있는 사람들은 친절하지 않습니다
(덜 불평하고, 더 많이 일하고, 시간을 절약하고 인사하세요)

먼저 얘기하겠습니다. 내가 택한 우회 경로에 대해: v-if 명령을 사용하여 이 열을 조작하고 싶었습니다

code 다음과 같습니다:

<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를 변경하여 긴 텍스트와 짧은 텍스트의 표시를 제어합니다

음, 그런 다음 행을 클릭할 때마다 이 열의 모든 텍스트가 변경됩니다. 어허, 이런 제품은 절대 동의하지 않을 것 같아요. 모두가 수업에서 일어설 것 같나요? ? ?

좋아요, 우리는 jquery 시대의 원래 개발 경험을 사용하고, 클릭 이벤트에 $(this)를 전달하고, dom을 수동으로 변경합니다

(프로젝트가 jquery로 구성된 경우, 다시 살펴보세요: //www .jb51.net/article/115161.htm, 가서 직접 해보세요. 아뇨, 직접 구성하세요.)

changeTxt($(this))

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

결과는 당연히 오류입니다.

아래에 같은 반 친구가 있습니다. jquery를 잘못 가져왔기 때문인가요? ? ?

물론 여기의 this는 dom의 this가 아니며, vue의 vm 객체입니다. 믿을 수 없다면 jquery의 $를 메서드에 사용하여 시도해 볼 수 있습니다. jquery의 잘못은 아닙니다. .

생각하는 것을 좋아하는 사람이라면 이것을 직접 사용해도 되는지 물어볼 수 있을까요?

changeTxt(this)

얻는 것은 현재 요소의 객체가 아니며 이 경로는 차단됩니다.

vue에서 요소 객체를 어떻게 얻나요? ? ?

요소에 ref

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

를 정의하고 메소드에서 this.$refs['txt'].text(XXX)를 통해 dom을 변경하는 거죠?

참조는 무엇을 반환하나요? ? ? 조작이 불가능하고, 반환된 레이블은 테이블의 마지막 행에 있는 데이터입니다. 와, 엉망이고 폭발합니다.

우리는 스팬에 대한 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){
    $(&#39;#&#39;+id).text(txt);
   }else{
    $(&#39;#&#39;+id).text(this.getShortStr(txt));
   }
  }

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

위는 제가 모두를 위해 컴파일한 것입니다. 앞으로 모든 사람에게 도움이 되길 바랍니다.

관련글 :

JS 스크립트 로딩 후 해당 콜백 함수 구현하는 방법

vue+webpack을 사용하여 패키지 파일의 404페이지 공백 문제 해결하는 방법

디버깅 및 독립 구현 방법 웹팩 프로젝트를 통한 패키징 구성 문서(자세한 튜토리얼)

위 내용은 Vue+jquery를 사용하여 테이블의 지정된 열에서 텍스트를 축소하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!