在Element UI中，el-table组件自带的全选按钮可以通过CSS隐藏。以下是隐藏全选按钮的CSS代码示例：

/* 隐藏Element UI表格全选按钮 */
.el-table__header-wrapper .el-checkbox {
  display: none;
}

将上述CSS添加到你的样式表中，即可隐藏掉el-table的全选按钮。如果你使用的是Vue.js项目，并且是在单文件组件中，可以在<style>标签中添加上述CSS，或者在全局样式文件中添加。

如果你想要在组件内部直接控制全选按钮的显示，可以使用show-header-overflow属性控制表头的溢出样式，或者通过自定义表头来实现。

<template>
  <el-table
    :data="tableData"
    show-header-overflow
    header-cell-class-name="hide-selection"
  >
    <!-- 你的表格列定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...你的数据
      ]
    };
  }
};
</script>
 
<style scoped>
.hide-selection .el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>

在这个例子中，我们使用了header-cell-class-name属性来为表头的单元格添加一个自定义的类名hide-selection，然后在<style>标签中定义了该类名的样式来隐藏全选按钮。

<template>
  <div id="app">
    <vue-json-pretty :data="jsonData"></vue-json-pretty>
  </div>
</template>
 
<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css'; // 导入样式
 
export default {
  components: {
    VueJsonPretty
  },
  data() {
    return {
      jsonData: {
        name: "Vue Json Pretty",
        version: "1.0.0",
        keywords: ["json", "formatter", "vue"]
      }
    };
  }
};
</script>

这段代码展示了如何在Vue应用中使用vue-json-pretty组件来格式化并展示JSON数据。首先导入了vue-json-pretty组件及其样式，然后在模板中使用该组件并通过:data属性传递要格式化的JSON对象。

在Vue中，你可以使用input事件和正则表达式来限制输入框的输入。以下是一个示例，展示了如何限制输入框仅接受负号、数字以及两位小数。

<template>
  <div>
    <input type="text" @input="limitInput" :value="inputValue" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    limitInput(event) {
      // 获取输入框的值
      let value = event.target.value;
 
      // 正则表达式，匹配负号开头，紧跟数字，可以有两位小数的字符串
      const regex = /^-?\d+(\.\d{1,2})?$/;
 
      // 如果输入的值不匹配正则表达式，则将inputValue设置为上一个值
      if (!regex.test(value)) {
        this.inputValue = event.target.value = value.replace(/[^\d.-]/g, '');
      } else {
        this.inputValue = value;
      }
    }
  }
};
</script>

在这个示例中，我们定义了一个limitInput方法，它会在每次输入时触发。该方法使用正则表达式/^-?\d+(\.\d{1,2})?$/来检查输入值。如果输入值不符合这个正则表达式，则会用相同的输入值覆盖输入框的内容，但去除掉所有非数字和负号的字符。这样就可以限制用户只能输入负号、整数或者两位小数的数字。

在Vue 3和Element Plus中使用el-tree组件进行树节点的添加、删除和修改，可以通过操作树的数据来实现。以下是一个简单的示例：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-drop="handleDrop"
    draggable
  >
    <!-- 添加按钮 -->
    <template #default="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <el-button size="mini" @click="append(data)">添加</el-button>
        <el-button size="mini" @click="edit(node, data)">编辑</el-button>
        <el-button size="mini" @click="remove(node, data)">删除</el-button>
      </span>
    </template>
  </el-tree>
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import { ElTree } from 'element-plus';
 
interface TreeNode {
  id: number;
  label: string;
  children?: TreeNode[];
}
 
const treeData = ref<TreeNode[]>([
  { id: 1, label: '节点1', children: [] },
  { id: 2, label: '节点2', children: [] },
]);
 
const defaultProps = {
  children: 'children',
  label: 'label',
};
 
// 添加节点
function append(data: TreeNode) {
  const newChild = { id: id++, label: `节点${id}`, children: [] };
  if (!data.children) {
    data.children = [];
  }
  data.children.push(newChild);
}
 
// 编辑节点
function edit(node: ElTree.TreeNode<TreeNode>, data: TreeNode) {
  // 这里可以打开一个对话框进行编辑
  console.log('编辑节点:', data);
}
 
// 删除节点
function remove(node: ElTree.TreeNode<TreeNode>, data: TreeNode) {
  const parent = node.parent;
  const children = parent?.data.children || treeData.value;
  const index = children.findIndex((d) => d.id === data.id);
  if (index !== -1) {
    children.splice(index, 1);
  }
}
 
// 实现拖拽功能
function handleDrop(draggingNode: ElTree.TreeNode<TreeNode>, dropNode: ElTree.TreeNode<TreeNode>, dropType: string, ev: Event) {
  console.log('拖拽操作:', dropNode.data, dropType);
}
 
let id = 3; // 示例中的唯一标识，实际应用中应使用更复杂的方案
</script>

在这个示例中，我们定义了一个TreeNode接口来描述树节点的结构，并使用了ref来创建响应式的树状数据。我们还实现了添加、编辑和删除节点的函数，以及一个处理树节点拖拽的函数handleDrop。在模板中，我们使用了template #default来自定义节点的内容，包括添加、编辑和删除按钮。

注意：这个示例中的添加、编辑和删除操作都是直接修改原始数据。在实际应用中，你可能需要使用状态管理或其他方式来处理这些异步操作。同时，这里的id是为了示例，实际中应该使用唯一的标识符来区分每个节点。

在Vue中，父组件可以通过使用ref属性来引用子组件实例，并通过这个引用调用子组件的方法。以下是一个简单的例子：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    'child-component': ChildComponent
  },
  methods: {
    callChildMethod() {
      // 使用$refs来访问子组件实例并调用其方法
      this.$refs.child.childMethod();
    }
  }
}
</script>

在这个例子中，父组件有一个按钮，当点击按钮时，会触发callChildMethod方法。这个方法通过this.$refs.child访问子组件实例，并调用子组件的childMethod方法。

确保在子组件中定义了childMethod方法：

<template>
  <div>
    <!-- 子组件内容 -->
  </div>
</template>
 
<script>
export default {
  methods: {
    childMethod() {
      // 子组件的方法逻辑
      console.log('Child method called');
    }
  }
}
</script>

这样，当在父组件中点击按钮时，子组件的childMethod方法将被调用。

在Vue 3中，混入(mixins)的概念被保留，但与之前版本的用法略有不同。混入(mixins)可以提供一种方式，让你可以在多个组件之间共享功能。

与此同时，Vue 3引入了Composition API，其中包含了一些新的概念，如setup函数、reactive、ref等，这些可以用来定义组件的逻辑。

下面是一个简单的例子，展示了如何在Vue 3中使用混入(mixins)和Composition API：

// 定义一个混入对象
const myMixin = {
  data() {
    return {
      mixinData: 'I am data from mixin',
    };
  },
  methods: {
    mixinMethod() {
      console.log('This is a method from mixin');
    },
  },
};
 
// 使用Composition API创建组件逻辑
function useMyLogic() {
  const componentData = 'I am data from component';
 
  function componentMethod() {
    console.log('This is a method from component');
  }
 
  return {
    componentData,
    componentMethod,
  };
}
 
// 定义组件
export default {
  mixins: [myMixin],
  setup() {
    // 使用混入和Composition API定义的函数
    const { mixinMethod } = myMixin;
    const { componentMethod } = useMyLogic();
 
    // 在setup函数中返回需要的响应式数据和方法
    return {
      mixinMethod,
      componentMethod,
    };
  },
};

在这个例子中，我们定义了一个混入对象myMixin，它有自己的数据和方法。我们还定义了一个使用Composition API的函数useMyLogic，它也有自己的数据和方法。然后在组件中，我们通过mixins数组引入了myMixin，并在setup函数中使用了useMyLogic函数。最后，我们在setup函数中返回了混入和Composition API定义的数据和方法，这样它们就可以在组件模板中使用了。

<template>
  <div>
    <button @click="start">开始计时</button>
    <button @click="stop">停止计时</button>
  </div>
</template>
 
<script>
import { ref, onMounted, onUnmounted } from 'vue';
 
export default {
  setup() {
    const intervalId = ref(null);
 
    const start = () => {
      if (intervalId.value) return;
      intervalId.value = setInterval(() => {
        console.log('计时器运行中...');
      }, 1000);
    };
 
    const stop = () => {
      if (intervalId.value) {
        clearInterval(intervalId.value);
        intervalId.value = null;
      }
    };
 
    // 组件挂载时启动计时器
    onMounted(start);
 
    // 组件卸载时清除计时器
    onUnmounted(stop);
 
    return {
      start,
      stop
    };
  }
};
</script>

这个例子中，我们使用了Vue 3.0的Composition API。setup函数返回了两个方法start和stop，分别用于启动和停止计时器。onMounted和onUnmounted则分别在组件挂载和卸载时调用这些方法。这样的实践可以确保计时器在组件不再使用时被清理，避免内存泄漏。

<template>
  <div class="infinite-scroll-container">
    <el-button
      v-if="hasMore"
      @click="loadMore"
      :loading="isLoading"
      type="primary"
    >
      点击加载更多
    </el-button>
    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="isLoading" >
      <!-- 数据列表或其他内容 -->
      <div v-for="(item, index) in list" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list: [], // 数据列表
      isLoading: false, // 是否正在加载
      hasMore: true, // 是否还有更多数据
      page: 1, // 当前页数
      pageSize: 10, // 每页数据量
    };
  },
  methods: {
    async loadMore() {
      if (this.isLoading || !this.hasMore) return;
      this.isLoading = true;
      try {
        const moreData = await this.fetchData(this.page, this.pageSize);
        if (moreData.length < this.pageSize) {
          this.hasMore = false; // 数据已全部加载完毕
        } else {
          this.list = [...this.list, ...moreData];
          this.page += 1;
        }
      } catch (error) {
        console.error('数据加载失败:', error);
      } finally {
        this.isLoading = false;
      }
    },
    async fetchData(page, pageSize) {
      // 这里应该是调用API获取数据的函数，具体实现根据实际API而定
      // 模拟API调用
      return new Promise((resolve) => {
        setTimeout(() => {
          const data = Array.from({ length: pageSize }, (_, i) => `Item ${page * pageSize + i}`);
          resolve(data);
        }, 1000);
      });
    },
  },
};
</script>
 
<style>
.infinite-scroll-container {
  height: 400px; /* 设置一个高度以便滚动 */
  overflow-y: auto;
}
</style>

这个示例展示了如何在Vue组件中使用v-infinite-scroll指令实现无限滚动加载数据的功能。组件包含一个按钮，当用户滚动到页面底部时，会触发加载更多数据的操作。数据通过模拟API调用（fetchData函数）获取，并且在加载过程中展示加载状态。当没有更多数据时，按钮会被禁用。这个示例提供了一个简单的无限滚动加载实现，并且可以根据实际需求进行扩展和修改。

在Vue前端上传图片到阿里云OSS，你需要使用阿里云提供的SDK——ali-oss。以下是步骤和代码示例：

1. 安装ali-oss包：

npm install ali-oss

2. 在Vue组件中引入ali-oss并配置OSS客户端：

import OSS from 'ali-oss';
 
export default {
  data() {
    return {
      client: null,
    };
  },
  created() {
    this.initOSS();
  },
  methods: {
    async initOSS() {
      /* 配置参数 */
      const { region, accessKeyId, accessKeySecret, bucket } = this.ossConfig;
 
      /* 创建OSS客户端实例 */
      this.client = new OSS({
        region,
        accessKeyId,
        accessKeySecret,
        bucket,
      });
    },
    async uploadFile(file) {
      try {
        /* 指定上传到OSS的文件目录和文件名 */
        const fileName = `your-directory/${file.name}`;
 
        /* 调用client的put方法上传文件 */
        const result = await this.client.put(fileName, file);
 
        /* 上传成功后的处理逻辑 */
        console.log(result.res.requestUrls);
      } catch (e) {
        /* 上传失败的处理逻辑 */
        console.error(e);
      }
    }
  }
};

3. 在Vue模板中添加上传按钮和input元素：

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传图片</button>
  </div>
</template>

4. 处理文件选择事件：

methods: {
  handleFileChange(e) {
    this.file = e.target.files[0];
  },
  uploadFile() {
    if (this.file) {
      this.uploadFile(this.file);
    }
  }
}

确保你的ossConfig包含了正确的阿里云OSS配置信息，例如region, accessKeyId, accessKeySecret, 和 bucket。

以上代码实现了在Vue前端选择文件并上传到阿里云OSS的功能。需要注意的是，这里的uploadFile方法是异步的，你可以根据自己的需求对错误处理和成功结果进行相应的操作。

<template>
  <div>
    <DraggablePlus v-model="list" @change="logEvent">
      <template #item="{ element }">
        <div class="item">{{ element.name }}</div>
      </template>
    </DraggablePlus>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import DraggablePlus from 'vue-draggable-plus';
 
export default {
  components: {
    DraggablePlus
  },
  setup() {
    const list = ref([
      { name: 'Item 1' },
      { name: 'Item 2' },
      { name: 'Item 3' },
      // ...更多项
    ]);
 
    function logEvent(event) {
      console.log(event);
    }
 
    return { list, logEvent };
  }
};
</script>
 
<style scoped>
.item {
  margin: 5px;
  padding: 5px;
  border: 1px solid #ccc;
}
</style>

这个例子展示了如何在Vue 3应用中使用vue-draggable-plus组件来实现一个列表的拖拽功能。v-model用于双向绑定列表数据，并且提供了一个#item插槽来自定义每个列表项的外观。@change事件用于监听拖拽操作，并且可以通过一个方法来处理这些事件，例如记录日志或执行进一步的操作。