用到的一些东西

---

1、路由跳转

const router = useRouter()

router.push({
    name: '',
    query: {
      dataPkId: xxx,
      num: xxx,
    },
  })

2、ref 与 reactive用法

①、ref

声明：const open = ref(false)

使用：ref.value = true

②、reactive

声明：const data = reactive({
  formReport: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    title: undefined, 
    level: undefined,
  },
  //弹框规则校验
  rules: {
    deptId: [{ required: true, message: '请选择xxxx', trigger: ['blur', 'change'] }],
  },
})

使用：const { queryParams, formReport, rules } = toRefs(data)  // 需要用toRefs转一下
    queryParams.value.pageNum = 1

tips：在模板中不用写.value

3、elementplus序号

<el-table-column label="序号" align="left" type="index" width="70">
    <template #default="scope">
        {{ scope.$index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize }}
    </template>
</el-table-column>

4、在setup中写方法,先引用

<script setup name='xxx'>
    import { ref, reactive, toRefs, onMounted, onUnmounted } from 'vue'

①、方法

    function add(){
        ...
    }
    或
    const add = () => {
        ...
    }

    const getList = async () => {

        try {
            const data = await PostApi.getPostPage(queryParams)
            list.value = data.list
            total.value = data.total
        } catch {
  
        } finally {
            loading.value = false
        }
    }

②、初始化

    onMounted(() => {
        ...
    })
    或
    直接写在script标签里面最下面 
</script>

5、根据el-tree树操作

①、给树节点添加disabled属性

function changeDisabled(data) {
  data.forEach((item) => {
    item.disabled = item.type == '00' ? true : false
    if (item.children && item.children !== null && item.children.length !== 0) {
      changeDisabled(item.children)
    }
  })
  return data
}

changeDisabled(树嵌套的data)

②、根据树id获取对应的name

/** 循环树获取选择的id所对应的对象 */
function getTreeName(id, tree) {
  let res = null
  for (let i = 0; i < tree.length; i++) {
    let ele = tree[i]
    ele.id === id ? (res = ele) : ''
    if (res) break
    if (ele.children && ele.children.length) {
      res = getTreeName(id, ele.children)
    }
  }
  return res
}

let obj = getTreeName(deptId, deptOptions.value)

treeObj.value.deptName = obj.label

6、watch监听

/** 监听从详情页面页面跳转回来刷新页面 */
watch(
  () => router.currentRoute.value.path,
  (toPath, fromPath) => {
    //要执行的方法
    if (fromPath == '/opinionAnalysis/detail') {
      location.reload()
    }
  },
  { immediate: true, deep: true }
)

7、使用 docx-preview 预览word文档流(二进制流)的时候

import { renderAsync } from 'docx-preview'

// 渲染时候
// const previewContainer = document.getElementById('fileShow') // 不要用，多个页面预览的时候，预览容易出现白屏
// renderAsync(res.data, previewContainer) //渲染

// 用这个
<div ref="file" id="fileShow"></div>
const file = ref()
renderAsync(res.data, proxy.$refs.file) //渲染

8、勾选框根据某个状态判断是否勾选

<el-table-column type="selection" width="50" align="center" :selectable="checkSelectable" />

// 勾选框根据反馈状态判断是否勾选
function checkSelectable(row) {
  if (row.feedbackState == 0) {
    return false
  } else {
    return true
  }
}

9、复选框转单选框

// 单选勾选框 
// <el-table v-loading="loading" ref="multipleTableRef" @select="handlerSelect" :data="feedbackList" @selection-change="handleSelectionChange" @row-click="rowClickHandle" highlight-current-row>

const multipleTableRef = ref() // 表格ref
const ids = ref([]) // 表格多选id集合
const multiple = ref(true) // 多选按钮是否禁用

// 反馈弹出框form表单 和 多条件搜索 字段
const data = reactive({
  // 表格勾选数据
  selectCheckList: [],
  // 多条件搜索
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    title: undefined, // 标题
    level: undefined, // 等级
   
    orderByColumn: undefined,
    isAsc: undefined,
  },
  //规则校验
  rules: {
    deptId: [{ required: true, message: '请选择组织机构', trigger: ['blur', 'change'] }],
  },
})

const { selectCheckList, queryParams, rules } = toRefs(data)

// 表格某一行的单击事件
    function rowClickHandle(row) {
        const selectData = data.selectCheckList
        multipleTableRef.value.clearSelection()
        if (selectData.length == 1) {
            const [item] = selectData
            const shouldSelect = item !== row
            multipleTableRef.value.toggleRowSelection(row, shouldSelect)
        } else {
            multipleTableRef.value.toggleRowSelection(row, true)
        }
    }

// 当用户手动勾选数据行的 Checkbox 时触发的事件
    function handlerSelect(selection, row) {
        // 清除 所有勾选项
        multipleTableRef.value.clearSelection()
        if (selection.length == 0) return
        multipleTableRef.value.toggleRowSelection(row, true)
    }
// 当选择项发生变化时会触发该事件
    function handleSelectionChange(selection) {
        console.log('表格的选中 可以获得当前选中的数据', selection)
        data.selectCheckList = selection
        ids.value = selection.map((item) => item.userId)
        multiple.value = !selection.length
    }

// css

// 隐藏全选按钮
:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
  visibility: hidden;
}

.circle{
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background-color: #b82c22;
  border-radius: 50%;
}


// 筛选

/* 覆盖默认的筛选图标样式 */
    :deep(.el-table .cell .el-table__column-filter-trigger) {
      background: url('@/assets/icons/svg/filter.svg') no-repeat center;
      background-size: contain;
      width: 20px; /* 自定义宽度 */
      height: 20px; /* 自定义高度 */
    }

/* 当图标被激活时的样式 */
    .el-table .cell .el-table__column-filter-trigger.active {
      background-image: url('path/to/your/custom-icon-active.png');
    }

10、数组添加序号

const originalArray = ['apple', 'banana', 'cherry'];

originalArray.map((item, index) => `${index + 1}、${item}`)
// [ '1、apple', '2、banana', '3、cherry' ] 
 
originalArray.map((item, index) => `${index + 1}、${item}`).join(' ') 
// '1、apple 2、banana 3、cherry'

11、Vue3 中 使用watch 监听路由中的值 会重复执行多次

// 遇到的问题：watch监听路由请求列表数据的时候会重复请求多次，累加请求
// 出现的原因：因为使用了keep-alive；
// 解决的办法：方法一：去掉keep-alive；方法二：在onDeactivated中销毁watch；


const destroyWatch = watch(
	() => route.query.id,
	(newVal, oldVal) => {
		console.log(newVal)
        getData() // 这个会请求多次
        ....
	},
	{ immediate: true, deep: true }
)

onDeactivated(() => {
	destroyWatch()
})

....后续更新