点击指定按钮弹出指定按钮

点击指定按钮弹出指定按钮

（表格数据中，包含一列有操作按钮，点击某一按钮弹出相应的弹窗)

首先给表格添加新的标识列，如果表格数据自带标识列可不加

 // 将表格数据解构赋值给新增列isShow,index
    userData.value = userData.value.map((item, index1) => {
      return { ...item, isShow: false, index: index1 };
    });

<!-- 绑定isShow字段，为true就显示 -->

		<button
            @click="changeIsShow(record.index)"
            class="relative py-2 px-4 text-black overflow-hidden bg-white transition-all duration-400 ease-in-out shadow-md hover:scale-105 hover:text-white hover:shadow-lg active:scale-90 before:absolute before:top-0 before:-left-full before:w-full before:h-full before:bg-gradient-to-r before:from-blue-600 before:to-blue-500 before:transition-all before:duration-500 before:ease-in-out before:z-[-1] hover:before:left-0"
          >
            操作
          </button>

		<div
            class="absolute right-[82px] shadow-lg top-2"
            v-if="record.isShow"
          >
            <opera-com :rowData="record" />
          </div>

		 

//点击按钮 将点击的按钮显示，同时将其他按钮的弹窗关闭
const changeIsShow = (index1) => {
  props.tableData.map((item, index) => {
    if (index1 == index) {
      item.isShow = !item.isShow;
    } else {
      item.isShow = false;
    }
  });
};