2021-09-13view 详情展开和操作冲突

murongyuyao

于 2021-09-13 09:52:24 发布

阅读量315

点赞数

文章标签： vue viewer 前端

本文链接：https://blog.youkuaiyun.com/murongyuyao/article/details/120260944

版权

这篇博客讨论了在前端开发中，表格组件的展开详细信息功能与操作列可能存在交互冲突的问题。文章通过代码示例展示了如何使用`event.stopPropagation()`防止编辑操作冒泡，确保展开详情时不触发其他行为。同时，提到了权限指令`v-privilege`在控制不同操作可见性上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

view 详情展开和操作冲突

{
          title:'详情',
          type:'expand',//展开
          width: 50,
          render: (h, params) => {
            return h(classifyDetail, {
              props: {
                row: params.row
              },
              directives: [
                {
                  name: 'privilege',
                  value: 'classify-detail'
                }
              ],
            })
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 200,
          className: 'action-hide',
          render: (h, params) => {
            return this.$tableAction(h, [
              {
                title: '编辑',
                directives: [
                  {
                    name: 'privilege',
                    value: 'classify-edit'
                  }
                ],
                action: () => {
                  event.stopPropagation();//阻止冒泡/冲突
                  this.openModal('edit', params.row);
                }
              },
          }
        }
      ],

在这里插入图片描述