### 如何通过 JavaScript 获取 `
el-table-column` 绑定的
字段值
在
Element UI 的表格组件中，可以通过访问 DOM 节点或者 Vue 实例来获取 `
el-table-column` 所绑定的
字段值。以下是具体实现方法：
#### 方法一：通过 Vue 实例获取
如果已经绑定了 `ref` 属性到 `<
el-table>` 或者其子组件，则可以直接通过 Vue 实例访问这些数据。
```javascript
this.$refs.account
Table.columns.forEach(column => {
console.log('Prop:', column.property); // 输出每一列对应的 prop 值
});
```
上述代码会遍历所有的表头列，并打印每列所绑定的 `prop`
字段[^1]。
---
#### 方法二：通过原生 DOM 操作获取
当需要直接操作 DOM 来提取信息时，可以利用 `queryS
electorAll` 和其他 DOM API 完成此任务。
```javascript
const
tableColumns = document.queryS
electorAll('.
el-table__header
-wrapper .has
-gutter th');
tableColumns.forEach((th, index) => {
const columnName = th.queryS
elector('.c
ell').innerText.trim();
const boundProperty = th.getAttribute('data
-property'); // 自定义 data
-* 属性存储 prop 值
console.log(`第 ${index + 1} 列: 名称为 "${columnName}", 对应 Prop 是 "${boundProperty}"`);
});
```
需要注意的是，在实际开发过程中可能需要手动设置自定义属性（如 `data
-property`），因为默认情况下 HTML 中不会自动映射 Vue 的 `prop` 参数[^4]。
---
#### 方法三：结合作用域插槽动态处理
对于更复杂的场景，比如涉及多
字段拼接的情况，可借助作用域插槽完成逻辑判断并记录所需
字段名。
```html
<
el-table :data="projNameOrCodeMenuList">
<
el-table-column lab
el="项目名称(代码)">
<template slot
-scope="scope">
<!
-- 动态组合
-->
{{ scope.row.projectName }}{{ scope.row.projectCode }}
</template>
</
el-table-column>
</
el-table>
```
此时可通过监听事件或额外维护数组的方式保存各列使用的
字段列表[^3]。
---
#### 示例完整代码片段
下面提供了一个综合示例，演示如何从 Vue 实例以及 DOM 结构两方面入手解决问题。
```vue
<template>
<div>
<
el-table ref="example
Table" :data="
tableData">
<
el-table-column property="name" lab
el="姓名"></
el-table-column>
<
el-table-column property="age" lab
el="年龄"></
el-table-column>
</
el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 28 },
{ name: '李四', age: 30 }
]
};
},
mounted() {
this.getBoundPropsFromVueInstance(); // 方式一调用
this.getBoundPropsFromDOM(); // 方式二调用
},
methods: {
getBoundPropsFromVueInstance() {
this.$refs.example
Table.columns.forEach(col => {
console.log('Vue Instance Bound Property:', col.property);
});
},
getBoundPropsFromDOM() {
const headers = document.queryS
electorAll('.
el-table__header tr:first
-child th');
headers.forEach(header => {
const textContent = header.textContent.trim();
const customAttrValue = header.dataset.property || '(未指定)';
console.log(`${textContent}: ${customAttrValue}`);
});
}
}
};
</script>
```
以上展示了两种主要途径及其应用场景下的差异对比[^4]。
---
该博客主要围绕使用JS修改el-table字段展开，虽未给出具体内容，但可知核心是利用JS对el-table字段进行操作，这在前端开发中是常见的功能实现需求。
扫一扫
1042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
