Element UI problem collection is continuously updated

Table of contents

1. el-table + overflow-y: auto , I want the table to have a fixed height, and a scroll bar will appear when it overflows, but the rows on the table will be misplaced after use.

2. The el-table check box column is dynamically grayed according to the data in the current row (not optional)

3. Every time the el-dialog pop-up window is opened, the initial position is restored to the initial position

---

---

1. el-table + overflow-y: auto , I want the table to have a fixed height, and a scroll bar will appear when it overflows, but after using it, the row .

Solution:

1. Set a div outside the el-table, and set overflow-y: auto + height on the div

2. You can use the method provided by Element UI ( the attribute el-tableis defined in the element height), which can fix the header, see the screenshot below

Pipe network address:

2. The el-table check box column is dynamically grayed according to the data in the current row (not optional)

Add the selectable attribute to the check box column element, and make dynamic judgments based on the result of this attribute. (When clicking Select All, the grayed-out checkbox cannot be selected)

<el-table>
    <el-table-column type="selection" :selectable="handleSelecTable"></el-table-column>
</el-table>

methods: {
    /*
    * 仅对 type=selection 的列有效，
    * 类型为 Function
    * Function 通过返回 Boolean 类型的值，决定这一行的 CheckBox 是否可以勾选
    * Function(row, index)
    */
    handleSelecTable(row,index){
        if(row.kubun == 0){
            return false;
        }
        return true;
    },
}

3. Every time the el-dialog pop-up window is opened, the initial position is restored to the initial position

Because there is a lot of content in the pop-up window, a scroll bar appears. Every time the pop-up window is closed and opened, the position is the position when it was closed last time. The following code is implemented using ref and watch.

<el-dialog ref="dialog" :visible="sinseiEditVisiable">

watch: {
    sinseiEditVisiable () {
        if (this.sinseiEditVisiable) {
            this.$nextTick(()=>{
                this.$refs.dialog.$el.scrollTop = 0;
            })
        }
    }
}