Elementui table fixed columns + total rows

the scroll bar cannot scroll when it scrolls below the fixed column

< el-table: data= "tableData6" border= "show-summary style=" width: 100% >

<el-table-column prop="id" label="ID" width="180">
</el-table-column>
<el-table-column prop="name" label="">
</el-table-column>
<el-table-column prop="amount1" sortable label=" 1">
</el-table-column>
<el-table-column prop="amount2" sortable label=" 2">
</el-table-column>
<el-table-column prop="amount3" sortable label=" 3">
</el-table-column>
<el-table-column prop="amount3" sortable label=" 3">
</el-table-column>
<el-table-column prop="amount3" sortable label=" 3">
</el-table-column>
<el-table-column prop="amount3" sortable label=" 3">
</el-table-column>
<el-table-column prop="amount3" sortable label=" 3">
</el-table-column>

< / el-table >
var Main = {

data() {
  return {
    tableData6: [{
      id: "12987122",
      name: "",
      amount1: "234",
      amount2: "3.2",
      amount3: 10
    }, {
      id: "12987123",
      name: "",
      amount1: "165",
      amount2: "4.43",
      amount3: 12
    }, {
      id: "12987124",
      name: "",
      amount1: "324",
      amount2: "1.9",
      amount3: 9
    }, {
      id: "12987125",
      name: "",
      amount1: "621",
      amount2: "2.2",
      amount3: 17
    }, {
      id: "12987126",
      name: "",
      amount1: "539",
      amount2: "4.1",
      amount3: 15
    }]
  };
},
methods: {
  getSummaries(param) {
    const { columns, data } = param;
    const sums = [];
    columns.forEach((column, index) => {
      if (index === 0) {
        sums[index] = "";
        return;
      }
      const values = data.map(item => Number(item[column.property]));
      if (!values.every(value => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        sums[index] += " ";
      } else {
        sums[index] = "N/A";
      }
    });

    return sums;
  }
}

};
var Ctor = Vue.extend (Main)
new Ctor (). $mount ("- sharpapp")

Dec.14,2021

the current problem requires the following attributes to be added to the style
-sharptableBox. El-table--scrollable-x. El-table__body-wrapper {

z-index: 2;

}
clipboard.png


clipboard.png
scroll bar cannot drag


the same question. Have you solved the


problem? because when el-table adds fixed to the column, it actually adds a relative positioning div, named el-table__fixed above the table. She will redraw in real time according to the table dragged below. Because it is covered, it cannot be dragged

.

the method of the landlord has not been solved, but I have found a new solution. Execute

in the drop after the request for the interface list.
this.$nextTick(() => {
    this.$refs.table.doLayout();
});
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4c97b-44ebf.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4c97b-44ebf.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?