how does element-ui put the total row on the first line, as shown in the figure prototype?
originally we also put it on the last line, but the boss of the meeting said that he wanted to see the summary data at first glance, and then our product thought it made sense, so we changed the prototype and put it on the first line. There is always the last line on the official website, but the first line can not be found.
add the following two lines of CSS, to put the total line on the first line:
/* /deep/ */
/deep/ .el-table {
display: flex;
flex-direction: column;
}
/* order0order1 */
/deep/ .el-table__body-wrapper {
order: 1;
}Note that the table does not set the fixed property, as there will be style conflicts. If you do enable the fixed attribute, you need to add the following two more lines of CSS as compensation fixes:
/ fixed 2 /
/deep/ .el-table__fixed-body-wrapper {
top: 96px !important;
}
/deep/ .el-table__fixed-footer-wrapper {
z-index: 0;
}write your own summary method, that is, sum the attributes separately, and then use unshift in tableData
Brother, is there a solution? I also met today, the boss said to see the total data at first sight.
messageBox global function in elementui is defined in vue export let messageBox = (vm) => { const h = vm.$createElement; vm.$msgbox( { title: , message: h( p , null, [ h( span , { class : ...
when it comes to the demand of comparison pit, element-ui table sorting defaults to ascending order first, and then clicking descending order. Now it is time to descend the order for the first time, and then click to ascend the order. Looking around, I c...
Vue.extend({ props: ["row", "column"], render(h) { return h("el-input", { attrs: { readonly: true, val...
as shown in the figure, the element-ui date component marks us the date of the day by default, which corresponds to the period of the system. Because we are working on a cross-border project, we now want to customize the blue today tag to the current d...
does anyone know how to do range control? There seems to be no such attribute and case ~ ...
as shown in the figure, I give el-form a return submission to execute a method, and @ keyup.enter.native is written on el-form. I ve used element-ui before. It s written on el-form. I saw that people who looked up on the Internet also said @ keyup.en...
for example, the table is sorted according to the date order before paging, and the date is sorted disorderly after paging, as shown in the following figure this is the first page . obviously, the date order is out of order, but it is sorted on the...
Is there any way to achieve the effect of the following figure with the vue elementUI used in ? ...
my goal is to get multiple pieces of data from a table from the database and display it in the form of a notification when opening a single page, so after getting the database data in the mounted hook function, call the Notification component with for l...
pagination paging control in the project page using eletable + ele. wants to implement a paging control that does not scroll with the page when there is a lot of data on the page and under the screen. But suspended at the bottom of the window. now us...
methods:{ applyFree(formName){ let _this = this; _this.$refs.formName.validate((valid) => { if (valid) { debugger; } else { return false; } } } -sharp-sharp ...
: ...
there is a lot of data in the drop-down, so I don t want to request all of them to be displayed. want to do a paging display function, my idea is to load ten pieces of data for the first time, and when the mouse is pulled to the last piece of data,...
In the project, many modal boxes are required to submit the form. The beginning and end of the modal box are all the same, and the middle content uses slot to insert different content. Click OK to submit the data to different interfaces. shared modal ...
ERROR in . src renderer App.vue Module build failed (from . node_modules vue-loader lib index.js): Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options. ...
choose this [ "2018-10-08T16:00:00.000Z ", "2018-11-05T16:00:00.000Z "] can you do this [ "2018-10-08 ", "2018-11-05 "] ...
how to implement https: blog.csdn.net CodingN., please give me a thought, thank you ...