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

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #viewer #前端

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

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);
                }
              },
          }
        }
      ],