Element-ui table header merge - Codes Helper - Programming Question Answer

Element-ui table header merge

vue + element-ui table
how headers are merged

  <el-table :data="tableData" :span-method="arraySpanMethod" style="width: 100%" border>
    <el-table-column prop="date" label=" " width="180" align="center">
    </el-table-column>
    <el-table-column prop="name1" label="" width="180" align="center">
    </el-table-column>
    <el-table-column label="1" width="180 " align="center">
      <el-table-column prop="zongliang" label="(m)" width="120" align="center">
      </el-table-column>
      <el-table-column prop="name" label="(m/)" width="120" align="center">
      </el-table-column>
    </el-table-column>
  </el-table>
        tableData: [{
    date: "",
    name1: "",
    zongliang: "1",
    name: "",
  }, {
    date: "",
    name1: "",
    zongliang: "1",
    name: "",
  }, {
    date: "",
    name1: "",
    zongliang: "1",
    name: "",
  }, {
    date: "",
    name1: "",
    zongliang: "1",
    name: "",
  }]
  
arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
  console.log(rowIndex);
  if (rowIndex % 2 === 0) {
    if (columnIndex === 0) {
      return [1, 2];
    } else if (columnIndex === 1) {
      return [0, 0];
    }
  }
},
rowIndex 0 1 2 4

Jun.12,2021

I also encountered the same problem. As a result, I solved
dom part

with CSS and slot.

            <el-table-column label="" width="300">
                <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>

css part
.el-table td {

            padding: 0px 0!important;
            .cell {
                line-height: 40px;
            }
            .cell span {
                border-right: 1px solid -sharpebeef5;
                padding: 10px 7px;
                width: 100px;
                display:inline-block;
            }
            .cell span:last-child{
                border: none;
            }
        }

result:

element-ui
http://element-cn.eleme.io/-sharp/...

:
tbody,

style

:

Previous: SpringBoot serializes exceptions using Java8 time API

Next: Is there any way to convert word documents generated by Freemaker into standard word documents?

Ement-ui table switch filter items to get back the new data, the text switched, but the picture after a while to switch how to solve?
For the project of elemen-ui+vue, switch the filter items on the table, get the new list, replace the text, and then replace the picture after a while. Is there any good way to solve this problem? ...

Element-ui javascript

Feb.26,2021
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
This kind of tagsview point how to write the corresponding page when each one is closed, is it complicated?
Click the corresponding tag to close the corresponding page, how to write this, please < template > ...

Vue.js element-ui

Feb.27,2021
The processing of dynamic routing in vue single page mode
there is such a background system, which is divided into many systems and modules, which involves a lot of operation permissions, and each lander is assigned different permissions, so the operable menus and visible pages are also different. the previo...

Vue.js vue-router vuex element-ui javascript

Feb.27,2021
Setting center to true in elementUI centers the title and bottom. This is not in the middle. What's going on?
< template scope= "scope " > <el-button type="text" size="small">< el-button> <el-button @click="handleClick(scope.row)" type="text" size="small">< el-button> <el...

Element-ui

Feb.27,2021
The problem with the el-selece tag! Select less than the first option
<el-select @change="orgChange" v-model="sectionNameOpt" filterable placeholder=""> <el-option v-for="item in sectionNameOpts" :key="item.index" :label="item.orgN...

Vue.js html javascript element-ui

Feb.27,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
Vue.js+element-ui drop down the selection box to make a scratch on the screen. What should I do?
...

Element-ui

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
Problems encountered in using table controls of elementUI in vue-cli
Technical note: vue-cli+elementUI table control Business scenario description: 1.tabletable 2.end_date 3. 4.10>;10>ago solution: use the row-class-name attribute in the elementUI talbe control to determine whether to include the specified fiel...

Vue.js element-ui

Feb.28,2021
How to write the Vue subcomponent JSX to receive the passed $attrs?
now the situation is like this. My component is written in JSX as a child component. The props, sub-components that are not collected by the parent component should be picked up by this.$attrs, and they have indeed been received, but how can they be wri...

Element-ui jsx 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
The tabs component of elementui has a blue border problem.
in the chrome browser, the component does not change, switch the window after selecting a tab, and then switch back, a blue border will appear, and after selecting the others, it will disappear. ...

Element-ui chrome

Feb.28,2021
What should I do if the horizontal menu bar in the element-UI component loses focus and cannot be retracted automatically after the horizontal menu bar is expanded?
for example, after expanding like the following, click on the contents but the menu bar will not automatically withdraw what should be solved, thank you! the content below me is wrapped in router-view the code for the horizontal menu bar is as fo...

Vue-router element-ui

Feb.28,2021
In el-dialog (display window), use Sortablejs to sort the table (el-table) in element without dragging.
such as headings, I want to sort the form by dragging within el-dialog. can be dragged if it is placed on the general surface. indicates that I have correctly introduced sortablejs into , but if I put the form on el-dialog, drag sorting will become ...

Vue.js element-ui element table sortable

Feb.28,2021
ElementUI Select component filter-method problem
there is a requirement that when Select selects a city, it needs fuzzy search, which supports not only Chinese, but also pinyin, acronyms and so on. The back end will give me the corresponding fields, but I find that using filter-method to pass in funct...

Javascript vue.js element-ui

Feb.28,2021
How do I call Element-UI Methods?
now use Element-UI to upload files, and then need to use the clearFiles method, but how many failed attempts? the examples found in Github Issues did not run successfully either https: github.com ElemeFE el. ...

Javascript element-ui element

Feb.28,2021
How to realize the echo of DatePicker in elementUI and save it to the backend?
< H2 > question < H2 > the frontend uses the same Form, newly added data edited and added in a page of vue+elementUI, to successfully reach the backend. Because the data of the wrong type is returned from the backend API when modified, the time error ...

Datepicker element-ui

Feb.28,2021

Menu