没反应点击第二个还是打不开
时间: 2023-07-17 19:10:02 浏览: 46
非常抱歉,我之前的回答有误。在element-ui的el-table组件中,第二个el-table-column内部的点击事件不会直接控制第一个el-table-column的展开或闭合状态。要实现这一功能,您需要使用自定义组件,并在其中实现相应的逻辑。
下面是一个示例,展示了如何使用自定义组件来实现您的需求:
```html
<el-table :data="tableData">
<el-table-column>
<!-- 第一个el-table-column -->
<template slot-scope="props">
<expand-column :row="props.row" :expanded.sync="props.expanded"></expand-column>
</template>
</el-table-column>
<el-table-column>
<!-- 第二个el-table-column -->
<template slot-scope="props">
<!-- 渲染数据 -->
<p @click="toggleExpand(props.index)">{{ props.row.data }}</p>
</template>
</el-table-column>
</el-table>
```
在上面的代码中,我们使用了一个名为`expand-column`的自定义组件来控制第一个el-table-column的展开或闭合状态。通过将`row`和`expanded`属性传递给自定义组件,我们可以在自定义组件内部控制展开状态。
下面是自定义组件的示例代码:
```html
<template>
<div>
<p @click="toggleExpand">
<i class="el-icon-arrow-right" v-if="!expanded"></i>
<i class="el-icon-arrow-down" v-else></i>
</p>
<div v-show="expanded">
<!-- 展开内容 -->
<p>{{ row.description }}</p>
</div>
</div>
</template>
<script>
export default {
props: {
row: Object,
expanded: {
type: Boolean,
default: false
}
},
methods: {
toggleExpand() {
this.$emit('update:expanded', !this.expanded);
}
}
};
</script>
```
在上面的代码中,自定义组件中的`toggleExpand`方法用于切换展开状态,并通过`this.$emit`来触发`update:expanded`事件,从而更新父组件中的展开状态。
请根据您的实际情况调整代码,并确保在Vue组件中正确设置自定义组件和toggleExpand方法。这样,当您点击第二个el-table-column中的数据时,就可以控制第一个el-table-column的展开或闭合状态了。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)