<el-button type="primary" size="default" :disabled="selectIdArr.length ? false : true"有什么用

这是一个基于 Element UI 组件库的 Vue.js 代码片段，el-button 是 Element UI 中的按钮组件，type="primary" 表示按钮类型为主要按钮，size="default" 表示按钮大小为默认大小。而 :disabled="selectIdArr.length ? false : true" 则是设置按钮是否禁用的属性，如果 selectIdArr 数组的长度大于 0，则按钮不禁用，否则按钮禁用。这个代码片段的作用可能是在一个多选框或下拉框中，只有选择了至少一项时，才能点击该按钮进行后续操作。

相关问题

怎么对表单中的el-upload做el-form 的rules中的require验证，触发时机为blur

在Element UI中，`el-upload` 和 `el-form` 结合使用时，如果你想在用户输入框失去焦点(`blur`)时对上传文件进行有效性验证，你可以这样做：

首先，在你的Vue组件中，你需要创建一个`upload`字段，并在`data`选项中定义，同时给它设置一个默认值如`null`。然后在`el-form`的`rules`对象中添加一条规则，针对`upload`字段，设置`trigger`为`blur`并指定验证条件。

例如：

<template>
  <el-form ref="form" :model="formData" :rules="fileRules">
    <!-- ...表单元素 -->
    <el-form-item label="上传文件">
      <el-upload
        ref="upload"
        :action="uploadUrl"
        :on-change="handleChange"
        :on-error="handleError"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        accept="image/*"
        @remove="handleRemove"
      >
        <i v-if="!fileList.length">点击上传</i>
        <el-progress :percentage="uploadPercent" v-if="fileList.length"></el-progress>
        <el-button size="small" type="primary" disabled="disabled">{{ fileList.length ? '已上传' : '请选择文件' }}</el-button>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        // ...其他数据,
        upload: null,
      },
      fileRules: {
        upload: [{ required: true, message: '请上传文件', trigger: 'blur' }],
      },
      fileList: [],
      uploadUrl: 'your/upload/url',
      uploadPercent: 0,
    };
  },
  methods: {
    // ...其他处理函数
  },
};
</script>

在这个例子中，当`upload`字段为空并且失去焦点时，会触发`required`验证，显示相应的错误提示。记得处理好`before-upload`、`success`、`error`等事件，以便控制上传状态和展示进度条。

vue2 el-upload 实现拖拽上传文件 点确定后才上传 这个功能 写一个组件

好的，以下是一个实现拖拽上传文件，点击确定后才上传的`<DragUpload>`组件。

<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="action"
      :multiple="multiple"
      :before-upload="beforeUpload"
      :file-list="fileList"
    >
      <slot name="trigger">
        <div class="drag">
          <i class="el-icon-upload"></i>
          <div class="drag-text">将文件拖到此处，或<em>点击上传</em></div>
        </div>
      </slot>
    </el-upload>
    <div class="button-group">
      <el-button type="primary" @click="handleUpload" :disabled="fileList.length === 0">确定</el-button>
      <el-button @click="clearFiles">清空</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DragUpload',
  props: {
    action: {
      type: String,
      required: true
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      return false;
    },
    handleUpload() {
      this.fileList.forEach(file => {
        this.$refs.upload.submit(file);
      });
    },
    clearFiles() {
      this.fileList = [];
    }
  }
}
</script>

<style>
.upload-demo {
  border: 1px dashed #ccc;
  border-radius: 2px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}
.drag {
  font-size: 20px;
  color: #999;
  margin-bottom: 10px;
}
.drag-text {
  margin-top: 10px;
}
.button-group {
  margin-top: 10px;
  text-align: right;
}
</style>

使用方法如下：

<template>
  <div>
    <drag-upload action="/upload" :multiple="true">
      <template v-slot:trigger>
        <el-button size="small" type="primary">上传文件</el-button>
      </template>
    </drag-upload>
  </div>
</template>

<script>
import DragUpload from './components/DragUpload';

export default {
  components: {
    DragUpload
  }
}
</script>

你可以根据自己的需求修改样式和属性。