使用原生JS如何将el-table高度设置为空

通过原生 JS 设置 el-table 的高度为空值可以使用以下代码：

var table = document.querySelector('.el-table');
table.style.height = '';

其中，`'.el-table'` 是 el-table 的 CSS 类名，你需要根据实际情况修改为你的代码中使用的类名。设置样式属性 `height` 的值为空字符串 `''` 即可将 el-table 的高度设置为空。

相关问题

原生js el-table

原生JS中的el-table是指element-ui库中的表格组件。它可以通过使用element-ui提供的API来创建和操作表格。在原生JS中，可以使用以下代码来创建el-table组件：

// 创建el-table组件
var table = document.createElement('el-table');
table.setAttribute('v-loading', 'dataListLoading');
table.setAttribute(':data', 'dataList');
table.setAttribute('border', '');
table.setAttribute('align', 'center');

// 创建el-table-column组件
var column = document.createElement('el-table-column');
column.setAttribute(':label', 'item.propName');
column.setAttribute(':property', 'item.propItem');
column.setAttribute('v-for', 'item in tableColumnList');
column.setAttribute(':key', 'item.prop');
column.setAttribute('align', 'center');

// 创建template和span元素
var template = document.createElement('template');
var span = document.createElement('span');
span.textContent = '{{scope.row\[scope.column.property\]}}';

// 将span元素添加到template中
template.appendChild(span);

// 将template元素添加到el-table-column组件中
column.appendChild(template);

// 将el-table-column组件添加到el-table组件中
table.appendChild(column);

// 将el-table组件添加到页面中的某个元素中
var container = document.getElementById('container');
container.appendChild(table);

以上代码是通过原生JS动态创建el-table组件的示例。你可以根据自己的需求进行修改和扩展。
#### 引用[.reference_title]
- *1* [el-table 动态表格实现+原生表格实现代码](https://blog.csdn.net/weixin_50748620/article/details/123419248)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [el-table表格——获取单击的是第几行和第几列 & 表格排序之el-table与sort-change、el-table-column与sort-...](https://blog.csdn.net/weixin_44867717/article/details/125618132)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

el-table el-table-column 如何给表头添加点击事件

可以使用 el-table 的 header-click 事件来给表头添加点击事件。

例如，在 el-table 中添加一个 header-click 事件监听器：

<el-table @header-click="handleHeaderClick">
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
</el-table>

然后在 Vue 实例中添加一个 handleHeaderClick 方法：

methods: {
  handleHeaderClick(column, event) {
    console.log('column:', column);
    console.log('event:', event);
  }
}

在这个方法中，第一个参数 column 是被点击的表头列的信息，第二个参数 event 是原生的点击事件对象。你可以在这个方法中编写任何你想要执行的代码，例如点击后重新排序表格数据等等。