前端使用$confirm提示弹窗时，文字可渲染样式。

勇敢琳琳不怕困难

于 2024-08-23 10:12:38 发布

阅读量131

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/m0_61101059/article/details/141458852

版权

onDelete (row) {
        const msg =
          '<div><span style="color: #F56C6C">删除后将不可恢复</span>，你还要继续吗？</div>'
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
          type: 'warning'
        })
          .then(() => {
            const { parentId, id } = row
            // 根节点直接删除
            if (parentId === '0') {
              const delIndex = this.tableData.findIndex((item) => item.id === id)
              this.tableData.splice(delIndex, 1)
            } else {
              // 找到父节点，通过父节点删除
              let parentRow = {}
              const findRow = (data) => {
                data.forEach((item) => {
                  if (item.id === parentId) {
                    parentRow = { ...item }
                  }
                  if (item.child && item.child.length) {
                    findRow(item.child)
                  }
                })
              }
              findRow(this.tableData)

              const { child } = parentRow

              const delIndex = child.findIndex((item) => item.id === id)

              child.splice(delIndex, 1)
            }
          })
          .catch(() => { })
        this.$set(this.tableData);
      },