dec4th

其他同事merge代码导致线上多次commit被覆盖

前言：

其他同事merge代码导致线上多次commit被覆盖，

此时自己本地代码和线上代码差多个不同commit，

无法push，也无法pull。

因为线上与本地commit记录多次不一样（记录差异过大，会拒绝更新）

无法pull, (pull就会报错)

根据执行后的错误提示

hint: You have divergent branches and need to specify how to reconcile them.
hint: You can do so by running one of the following commands sometime before
hint: your next pull:
hint: 
hint:   git config pull.rebase false  # merge
hint:   git config pull.rebase true   # rebase
hint:   git config pull.ff only       # fast-forward only
hint: 
hint: You can replace "git config" with "git config --global" to set a default
hint: preference for all repositories. You can also pass --rebase, --no-rebase,
hint: or --ff-only on the command line to override the configured default per
hint: invocation.
fatal: Need to specify how to reconcile divergent branches.

中文翻译
提示：您有不同的分支，需要指定如何协调它们。
提示：您可以通过之前运行以下命令之一来执行此操作
提示：你的下一个拉动：
暗示：
提示： git config pull.rebase false # 合并
提示： git config pull.rebase true # rebase
提示： git config pull.ff only # 仅快进
暗示：
提示：您可以将“git config”替换为“git config --global”以设置默认值
提示：所有存储库的首选项。 您还可以传递 --rebase, --no-rebase,
提示：或在命令行上使用 --ff-only 来覆盖配置的默认值
提示：调用。
fatal：需要指定如何协调不同的分支。

执行git config pull.rebase true(变基策略)本地代码被完全覆盖（自己本地的几次记录消失，git pulll --rebase也是一样）

执行 git config pull.rebase false(合并策略)，

发现线上和自己的几次commit记录都保留了，

解决问题！

关于如何查看git log已经看不到的commit记录？

因为线上自己的记录完全消失，

而我们本地的记录也被拉取下来的记录覆盖，

git log是看不到被覆盖的记录。

这时就可以使用git reflog查看历史记录，

再git reset —hard回到指定的记录

注意：

git reflog 主要用于在紧急情况下修复错误、恢复丢失的提交或者撤销不小心的变更。请注意，git reflog 记录的引用历史是有限的，因此在一段时间之后某些历史记录可能会被清理。

查看已经丢失的stash记录

git stash 保存的代码，

会在git stash pop 之后消失，

之后我们再次 git stash list不会再出现这条记录，

但我们有时有迫切的需要恢复已经被删除掉的stash记录（git stash pop 出现了问题，代码合并的不正确，

同时stash的记录已经删除了）。

这时，

我们就需要获得stash的历史记录哈希值！

执行

git fsck --no-reflog | awk '/dangling commit/ {print $3}' | xargs -L 1 git --no-pager show -s --format="%ci %H" | sort

出现哈希列表，

根据日期找到最新一次的stash记录，

执行git reset --hard 哈希 回退到指定的stash版本，

由此，

问题解决！

Vue3使用element-plus组件jsx写法

我们以menu组件为例

模版中的写法

/**
其中 template #title标签内的内容是自定义内容。
*/
<el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group title="Group One">
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item two</el-menu-item>
      </el-menu-item-group>
  </el-menu>

jsx写法

 // 使用v-slots，并声明title函数，这种方式与模版的标签定义方式作用一样
<el-menu >
    {routes.map((item, index) => {
      return (
        <el-sub-menu
          collaps={collapse}
          index={index + ''}
          key={item.path}
          v-slots={{
            title: () => item.name
          }}
        >
          ...
          ..
        </el-sub-menu>
      )
    })}
  </el-menu>

Vue3包裹组件&jsx插槽的思考

前言：

先来看看包裹组件

<script>
import { defineComponent } from 'vue';

export const ContentContainer = defineComponent({
  name: 'ContentContainer',
  render() {
    return (
      <div
        style={{
          padding: '12px',
          borderRadius: '12px',
          height: 'calc(100% - 35px)',

          backgroundColor: '#fff',
          overflow: 'hidden',
          margin: '0 10px',
        }}
      >
        <div
          style={{
            overflowY: 'auto',
            height: '100%',
            padding: '0px 8px',
          }}
        >
          {this.$slots.default ? this.$slots.default?.() : null}
        </div>
      </div>
    );
  },
});
</script>

模版中使用

<script lang="ts">
 import { ContentContainer } from '@/components/content-container';

export default defineComponent({
    components: {
        ContentContainer, 
    },
    name: 'CommentMethods',
    setup() {

        return {
          ...
          ..
        }
    }
})
</script>

<template>
    <ContentContainer>
      <div></div>
    </ContentContainer>
</template>

import { defineComponent, ref } from 'vue'

import { RouterView } from 'vue-router'

import { ContentContainer } from '@/components/container'


export default defineComponent({

  setup() {

    return () => (
      <div class={[styles.home]}>
        <ContentContainer>
          <RouterView
            style={{
              width: '100%',
              height: '100%'
            }}
          />
        </ContentContainer>
      </div>
      
      // <ContentContainer
      //   v-slots={{
      //    default: () => <RouterView style="{{" width: '100%', height: '100%' }} > ) } }) < code></RouterView>

以上jsx有两种写法，直接包裹，或者使用v-slots指令，

模版中直接包裹，

以上使用方式都能够有统一的样式，

达到样式统一的目的。

问题：

为什么无论是在jsx、模版中直接包裹，

都会有一致的效果？

同时使用v-slots与以上两种使用方式一样？

猜测，模版和jsx直接包裹的使用方式最终都会转换为默认模版，

即v-slots修饰一个函数的结果！

如何在elemenet-plus表格项中获得每一项的数据

前言：

element-plus表格不像antd，

可以定义渲染函数，

因此觉得很不方便，

除自己重新实现一套表格之外，

其实还可用使用插槽。

模版

<el-table :data="data" style="width: 100%" :row-style="rowStyle">
  <el-table-column prop="bulletinName" label="公告标题">
      <template #default="scoped">
            <div>
                {{ scoped.row.bulletinName || '--' }}
            </div>
      </template>
    </el-table-column>
</el-table-column>

jsx

<el-table
  style={{
    width: '100%',
    height: '450px',
    overflow: 'auto',
  }}
  {...props}
>
  {props.columns.map(item => {
    const { render, key, ...rest } = item;
    return (
      <el-table-column
        //@ts-ignore
        minWidth={item.minWidth || 150}
        key={key}
        size={'default'}
        data={props.data}
        {...rest}
      >
        {({ row }: any) => {
          const index = props?.data?.findIndex((item: any) => item[key] === row[key]) || 0;
          if (render && render instanceof Function) {
            return render(row, index);
          }
          return row?.[key] || '--';
        }}
      </el-table-column>
    );
  })}
</el-table>