12月

连续加班了三周，在这期间内每天都接触代码我感觉实力有一定的增长。刚好今天没有什么事，所以来总结一下这三周的收获。

1.JS里的条件语句要写全

在控制一些组件渲染的时候，只在状态为2或者4的情况下，结果发现照下面这样写，除了这两个都渲染了。

v-if="row.status==='2' ||'4'"

收获：JS里面不论&&还是||，后面的操作数需要是完整的

v-if="row.status==='2' || row.status==='4'"

2.分页错误

下面这样写会造成分页错误，一起来看看错误在那里吧

const loading = ref(false)
//默认页数
const page = ref({ current: 1, size: 30 })
const { current, size } = page.value
const total = ref(0)
const getMaterialList = async () => {
  loading.value = true
  try {
    const params = { page: page.value }
    const { data } = await getMaterialApi(params)
    tableData.value = data.records.map((item, idx) => ({
      ...item,
      index: (current - 1) * size + idx + 1
    }))
    total.value = data.total
  } catch (error) {
    ElMessage.error('获取任务列表失败')
    console.error('获取任务列表失败:', error)
  }
}

page是响应式变量，但是解构出来的current和size并不是，他们只会声明赋值一次，因此无论分页器如何修改page因为已经解构出来了所以不会修改。

结论：如果是经常变化的变量，不要在函数外解构，里面解构或者直接不解构。解决方法也有很多，比如将两个分别设计为computed；在函数内结构，每次current改变时调用函数；或者用toRefs

3.绑定ref的注意事项

注意在绑定ref的时候不要加:号

    <el-form :ref="searchFormRef"
             ref="searchFormRef"
     :model="form" label-width="auto" class="filter-form">

4.不同元素的控制方式

这是我之前写的让单元格的图片垂直水平居中的代码，但水平失败了，原因是什么呢？

.img-cell {
  z-index: 10;
  display: flex;
  align-items: center;
  text-align: center;
  height: 3.2rem;

  .my-img {
    position: relative;
    z-index: 20;
    width: 3rem;
    height: 3rem;
    border-radius: 2px;
    cursor: pointer;
  }

text-align:center

It's you！！！，注意当display为flex之后，就算之前my-img外裹着的是div块级，也会变为flex项目，那么这时就不会对margin:auto和对行内元素的text-align有影响。这里应该用justify-content:center