Sample Code for Vue + jquery to implement text shrinking of specified columns in a table, vuejquery

Sample Code for Vue + jquery to implement text shrinking of specified columns in a table, vuejquery

This article describes the sample code for Vue + jquery to implement text shrinking of specified columns in a table. The Code is as follows:

The effect is very simple, but it is really not easy to write, because Vue is unfriendly to people without React-based front-end Framework experience.
(Less spam, more work, save time out hi)

Let's talk about the detour I 've taken: I want to use the v-if command to operate this column.

The Code is as follows:

<El-table-column width = "250" align = "center" label = "benchmark"> <template scope = "scope"> <span v-if = "isAllTxt" >{{ getinclustr (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>

The changeTxt method is used to change the boolean isAllTxt to control the display of long and short texts.

And then click any row. All the text in this column is changed. Er, er, this product will never be agreed. Do you think it's a class of standing up ???

Well, we use the development experience of the jquery era to input $ (this) in the Click Event and manually change the dom

(The premise is that jquery is configured in the project. Please refer to http://www.bkjia.com/article/115161.htmto go up and continue. Oh no, configure it by yourself)

ChangeTxt ($ (this ))

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

The result is of course incorrect:

Some people say that jquery is wrong ???

Of course not. Here this is not dom's this, it is a virtual machine (vm) object of vue. If you do not believe it, you can try jquery $ in the method. It is not a jquery pot.

So some thinking friends say that I can use this directly?

ChangeTxt (this)

The result is not the object of the current element.

How does vue get the element object ???

Define ref for the element

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

In the method, use this. $ refs ['txt ']. text (XXX) to change the dom, huh?

What is returned by referencing ??? It cannot be operated, and the returned tag is the data in the last row of the table.

However, we can only define the id for the span in the most stupid way, and it is a different id. Use jquery to get the element corresponding to the id.

<El-table-column width = "250" align = "center" label = "benchmark"> <template scope = "scope"> <span: id = "scope. row. id "> {getinclustr (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 method: changeTxt (txt, id) {this. isAllTxt =! This. isAllTxt; if (this. isAllTxt) {$ ('#' + id ). text (txt);} else {$ ('#' + id ). text (this. getShortStr (txt); }}// getShortStr method getShortStr (txt_origin) {if (txt_origin.length> 20) {return txt_origin.substring ();} else {return txt_origin ;}}

This is done, but jquery and vue have different styles. The mixed use experience is not very good. If you have a good method, please leave a message and let me know. You must send me a thank you !!!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.