请问el-table,我想点击不同的表头可以让表头改变颜色,并且可以获取这列数据,并且前6个表头还不能点击
时间: 2023-08-07 10:04:35 浏览: 124
可以尝试以下代码实现:
```html
<template>
<div>
<el-table :data="tableData">
<el-table-column
prop="name"
label="姓名"
:resizable="false"
:sortable="false"
fixed
></el-table-column>
<el-table-column
prop="age"
label="年龄"
:resizable="false"
:sortable="false"
fixed
></el-table-column>
<el-table-column
prop="address"
label="地址"
:resizable="false"
:sortable="false"
fixed
></el-table-column>
<el-table-column
v-for="(item, index) in headers"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:resizable="false"
:sortable="index >= 6"
:header-cell-style="{
backgroundColor: activeHeader === index ? '#409EFF' : ''
}"
@click="handleHeaderClick(index)"
></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市', score: 80 },
{ name: '李四', age: 20, address: '上海市', score: 90 },
{ name: '王五', age: 22, address: '广州市', score: 85 },
{ name: '赵六', age: 24, address: '深圳市', score: 95 },
],
headers: [
{ prop: 'score', label: '成绩' },
{ prop: 'math', label: '数学' },
{ prop: 'english', label: '英语' },
{ prop: 'chinese', label: '语文' },
{ prop: 'physics', label: '物理' },
{ prop: 'chemistry', label: '化学' },
{ prop: 'biology', label: '生物' },
],
activeHeader: -1,
};
},
methods: {
handleHeaderClick(index) {
if (index < 6) return;
this.activeHeader = index;
const prop = this.headers[index].prop;
const data = this.tableData.map((item) => item[prop]);
console.log(data);
},
},
};
</script>
```
代码中,通过使用 `header-cell-style` 属性来动态设置表头的样式,使用 `click` 事件监听表头的点击事件,并通过 `prop` 属性来获取相应列的数据。同时,通过判断点击的表头是否小于 6 来实现前 6 个表头不能点击的需求。
阅读全文