How a vue+element project hides an entire line of el-table-column - Codes Helper - Programming Question Answer

How a vue+element project hides an entire line of el-table-column

<el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange" ref="multipleTable" class="exchangeTable">   
        <el-table-column align="center" type="selection" width="55" fixed></el-table-column>
        <el-table-column align="center" prop="name" label="" width="120"></el-table-column>
        <el-table-column align="center" prop ="type" label="">
          <template slot-scope="scope">
            {{ scope.row.type === 1 ? "" : "" }}
          </template>
        </el-table-column>
        <el-table-column align="center"  label="" width="160px">
          <template slot-scope="scope">
             <!-- <el-col :span="16"> -->
            <el-input  v-model="scope.row.exchangeNum" class="exchangeNum" @change="inputChange(scope.row)"></el-input>
             <!-- </el-col> -->
          </template>
        </el-table-column>
        <el-table-column align="center" label="" prop="costPointsNum">
           <template slot-scope="scope">{{scope.row.exchangeNum*scope.row.costPointsNum}}</template>
        </el-table-column>
        <el-table-column align="center" label="" prop="eachMax"></el-table-column>
        <el-table-column align="center" label="" prop="leftNum"></el-table-column>
      </el-table>

how the table structure above hides the whole row of data with the remaining number of 0 from being displayed

Element-ui vue.js

Mar.20,2021

Today, when I looked at the vue document in detail, I suddenly thought of the question that I didn't answer before. In fact, there is a detailed solution in the vue document.
Link: ide/list.html-sharp%E5%AF%B9%E8%B1%A1%E6%9B%B4%E6%94%B9%E6%A3%80%E6%B5%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" rel=" nofollow noreferrer "> list rendering-- Vue.js

example:

html:
<el-table :data=filteredTableData>
    <el-table-column>...<el-table-column>
</el-table>

js:

data(){
    return {
        tableData: [...]
    }
}

computed: {
    filteredTableData: function(){
    return this.tableData.filter(function(...){...});
    }
}

< hr >

original answer:
is it possible to add a v-if judgment directly?
like this:

<el-table-column v-if="leftNum!=0" align="center" label="" prop="leftNum"></el-table-column>

row-class-name this method can also implement

.el-table .hidden-row {
    display: none;
 }

deal with tableData, delete the one with the number of 0

the tableData Filter from the background, process the data and then show it.

Previous: Error in jupyter startup?

Next: Help: Wechat jssdk sharing configuration without any response, just like no configuration.

How the ElementUI tree control gets the selected node and the parent node (even if it is not all selected)
the demand has changed. Previously, you only need to submit the id array of the selected leaf node, and then you can get it directly through the official api [getCheckedKeys]. Now it is required to also pass the id of the parent node. get stuck. Many ...

Element-ui vue.js

Feb.26,2021
Upload pictures on ElementUI+Express
in the development of the ElementUI+Express project, uploading pictures encountered this problem: 1ElementUI: <el-upload action="http: localhost goods addNewGoodsPicture" :limit="1" :onError="uploadError" :onSuccess=&q...

Element-ui vue.js express node.js

Feb.26,2021
How does elementUI's navmenu cycle through different tags in v-for?
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">< el-menu-item> <el-submenu index="2">...

Element-ui vue.js

Feb.27,2021
How to make the el-tooltip of element-ui pop up when it appears and then disappear after a few seconds of tips, display?
A column in the page table has an el-tooltip,. Whether it is displayed or not is controlled by v-if, and how to make it not only display when v-if is established, but also pop up tips text prompts? <span v-if="x" @click.stop=...

Element-ui vue.js

Feb.27,2021
After vue2 el-upload uploads files (regardless of success or failure), how to clear the contents of files in el-upload?
after uploading a file using el-upload, the page has to be refreshed every time before uploading again. How to clear the contents of the file in el-upload after uploading the file (regardless of success or failure)? ...

File element-ui vue.js

Feb.28,2021
Vue element project, optimization for third-party js libraries. Cdn is introduced into vue.js,. Some content in the interface cannot be loaded.
introduce vue.min.js webpack.base.conf.jsexternalsvue tabletable into index.html according to the version used if import vue, removes externals and introduces cdn in main.js, it will load normally could you tell me what s wrong with my use? ...

Webpack element-ui vue.js

Feb.28,2021
How to prevent automatic sorting of tables when element ui clicks on the header
Table columns in the current project are sorted using sortable, and sort-change is monitored to fully sort the data of the entire table. But there are users who need to double-click the header to copy and paste, but this will trigger the sorting function...

Element-ui vue.js

Feb.28,2021
Judgment on the scope of time. Element UI in the case of editing
when I was creating the exam. The start time can be earlier or later than the current time, but if the start time is later than the end time, I should prompt "the start time cannot be later than the end time ". If the start time is earlier than the curr...

Element-ui vue.js html html5 javascript

Feb.28,2021
Big shots in the element-UI framework custom verification function passed the first rule parameter exactly what to do, and how to solve, and how to use, thank you.
for example, the first parameter rule, passed in checkage does not seem to be used in the body of this function, so ask for advice. <el-form-item label="" prop="age"> <el-input v-model.number="ruleForm2.age"...

Element-ui vue.js

Mar.01,2021
Ask for a question about multi-routing layout
The project is Vue + Element-UI the page goes like this 20 popover this is in a shrinking state. You can see that the route list alone accounts for half of the screen, and the use experience is very poor. Do you have a better layout method? please ...

Layout ui element-ui vue.js

Mar.01,2021
Elementui2.2.1 Select is still in the focus state after the option is selected. How can this focus state be removed?
when the official website of elementui is updated in 2.2.1, "the current Select is still in focus state after the option is selected ", how to remove this? When I switch desktop pool 2fu-> desktop pool 1 in the page, I will change the page route this....

Element-ui vue.js

Mar.01,2021
Use the table component of elementUI to make too long text appear on one line and misalign with the head?
The requirement of the product is to force the text of the table to be displayed on one line. I set white-space:nowrap; to .cell and there is a problem as shown in the figure. table component will forcibly generate two table tags and set table-layou...

Element-ui vue.js

Mar.01,2021
Element-ui card header style is invalid under scoped
I want to change the style of the head of the card and find that it affects the cards on other pages. then I added scoped, , but the modified style is invalid. How to change the configuration ? .el-card__header { background-color: -sharp999999; ...

Css javascript element-ui vue.js

Mar.01,2021
How to use the components of element-ui to display products with pictures with users?
1. Currently using element-ui components and vue.js to build the front end, now want to have a display of goods like the browsing interface, do you want to use el-table? At present, we only know the table form shown in the following figure, which has on...

Element-ui vue.js

Mar.02,2021
In el-form: can rules be dynamically bound?
can the rules in el-form be dynamically bound? the fields defined in the form control whether they are displayed or not according to different conditions, and these fields need to be validated. How to set them dynamically: rules? ...

Element-ui vue.js

Mar.02,2021
How to send a post request after el-upload uploads a picture in elementUi
upload pictures with el-upload in elementUi, and then send the picture data and form data together to the post request to the backend. The form data can be obtained by the backend, but the image data has not been available. What is the reason? <div ...

Element-ui vue.js

Mar.02,2021
File-list has multiple values in the upload file upload. How to know the index of the selected value when deleting it?
file-list has multiple values in the upload file upload. How to know the index of the selected value when deleting it ...

Element-ui vue.js javascript

Mar.02,2021
Vue element radio box group
html <el-row v-for="menu in formInline6" :key="menu.key" :gutter="20" > <el-col :span="4" class="in-left" style="padding-left:0;"> <label for="radio" cla...

Element-ui vue.js VMI-model-pass-value-data--custom-variable

Mar.02,2021
El-popover positioning problem
the pop-up box nesting el-popover, in el-table will not scroll as the window scrolls ...

Element-ui vue.js

Mar.03,2021
After vue jumps back to the previous route, the data is partially refreshed.
vue-router route jumps back to the original page, and the original page is partially refreshed? after the company name is selected, click the change in table, and the page will jump to another page. After the modification is completed and saved, it wi...

Element-ui vue.js

Mar.03,2021

Menu