<template slot-scope="scope" v-if="item.prop === 'scope.row.mg_state'"> <el-switch v-model="item.prop" /> </template>
时间: 2024-05-21 17:11:07 浏览: 14
This is a Vue.js template that uses a slot-scope to access the properties of a row in a table. The template conditionally renders an el-switch component based on the value of a property called "mg_state" in the row object. If the property exists, the el-switch component is rendered and bound to the value of the "prop" property.
相关问题
</el-table-column> <el-table-column v-for="(col, i) in columnList" :key="i" :prop="col.prop" :label="col.label" v-if="col.show == true" align="center" > <template v-if="col.children"> <el-table-column v-for="(item, index) in col.children" :key="index" :prop="item.prop" :label="item.label" > <template slot-scope="scope"> </template> </el-table-column> </template> </el-table-column> </el-table-column> 在<template slot-scope="scope"></template>添加代码,可以编辑任意一个子列单元格
在`<template slot-scope="scope"></template>`标签中,可以添加代码来编辑子列的单元格内容。
`slot-scope="scope"`是一个特殊的语法,用于接收父组件传递过来的数据,并在这个作用域中使用。
例如,如果想要在子列的单元格中显示每个单元格的索引值,可以在`<template slot-scope="scope"></template>`中添加以下代码:
```html
<template slot-scope="scope">
{{ scope.$index }}
</template>
```
在这个例子中,`scope.$index`表示当前单元格在子列中的索引值。
你可以根据自己的需求在`<template slot-scope="scope"></template>`中添加任意的代码来编辑子列的单元格内容。注意,`scope`对象提供了一些其他的属性和方法,可以根据需要使用,例如`scope.row`表示当前行的数据对象。
<el-table-column prop="remark" label="下单制作特殊说明"> <template slot-scope="scope"> <el-input type="text" placeholder="无" v-model="scope.row.remark"></el-input> </template> </el-table-column>怎么才能输入不影响全选
如果你想让el-input组件的输入不影响全选,可以给它添加一个事件监听,然后在事件处理函数中阻止事件冒泡。具体代码如下:
```html
<el-table :data="tableData" @select-all="false">
<el-table-column prop="remark" label="下单制作特殊说明">
<template slot-scope="scope">
<el-input type="text" placeholder="无" v-model="scope.row.remark" @mousedown.stop></el-input>
</template>
</el-table-column>
</el-table>
```
在el-input组件上添加了一个事件监听@mousedown.stop,这个事件监听会阻止鼠标按下事件的冒泡,从而避免影响到全选功能。
如果你需要同时阻止鼠标右键菜单的弹出,可以使用@contextmenu.prevent.stop事件监听,具体代码如下:
```html
<el-table :data="tableData" @select-all="false">
<el-table-column prop="remark" label="下单制作特殊说明">
<template slot-scope="scope">
<el-input type="text" placeholder="无" v-model="scope.row.remark" @mousedown.stop @contextmenu.prevent.stop></el-input>
</template>
</el-table-column>
</el-table>
```
这样,就可以在el-input组件内输入内容时不影响全选功能了。
相关推荐
![apk](https://img-home.csdnimg.cn/images/20210720083646.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)