标签: element-ui

我正在尝试在我的 Vue.js 项目之一中使用Element-UI设计一些表单。单击提交按钮后，我想在继续任何进一步操作之前检查表单是否有效。

任何人都可以指导我如何引用 Vue 组件中的元素并检查其有效性的示例。

以下是我的表单设置。

 <div id="frmEventCreate">
 <el-form v-bind:model="data" v-bind:rules="rules">
    <el-form-item label="Event name" prop="name" required>
       <el-input v-model="data.name"></el-input>
    </el-form-item>

    <el-button type="success" v-on:click="next" icon="el-icon-arrow-right"> Next Step </el-button>
 </el-form>
 </div>

var objEvent = {neme: "Some Name"};
vmEventCreate = new Vue({
    el: '#frmEventCreate',
    data: {
        data: objEvent,
        rules: {
            name: [
                {required: true, message: 'Please input event name', trigger: 'blur'},
                {min: 10, max: 100, message: 'Length should be 10 to 100', trigger: 'blur'}
            ]
        },
    },
    methods: {
        next: function …

当前，我有一个使用Webpack设置的Vue项目。

我想开始为UI库使用元素UI。

我做了之后

npm i element-ui -S

在我的终端

并在我的app.js（整个应用的入口）中添加了以下代码

import Vue from 'vue'
import ElementUI from 'element-ui';
Vue.use(ElementUI);

我能够开始在整个应用程序中使用和填充东西。

但是，我注意到没有应用CSS。

我应该如何处理CSS？如何告诉elementUI应用默认主题？

我安装了 "element-ui": "^2.3.7" 并在我的 Vue 组件中使用它：

<el-date-picker
          v-model="valueDateTimeOrder"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          :picker-options = "pickerOptions">
        </el-date-picker>

在数据中：

 pickerOptions: {
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
    }

它的工作完美。但是当我想禁用数组中的所有内容时，我不知道该怎么做。因为数组只存在于get api之后。但是数据做完所有这个组件后，它不能等待调用范围。帮我设置选择器选项。谢谢

我使用 el-icon 创建了一个带有自定义 el-dialog 标题的对话框，但 el-icon 没有出现。如何使图标出现？

这是我的代码

<el-dialog :title="titleData" :visible.sync="dialogVisible" width="30%">
  <span>This is a message</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
  </span>
</el-dialog>

methods: {
  setTitle() {
  this.titleData = '<el-icon-info></el-icon-info>' + 'Info'
}

这是我的小提琴：https : //jsfiddle.net/dede402/y93kvew5/6/

我通常能够很容易地解决这个错误，但这次似乎没有任何作用。

我的main.ts文件有这个：

import locale from 'element-ui/lib/locale/lang/en';

错误：

ERROR in /Volumes/SuperData/Sites/reelcrafter/rc-ts/src/main.ts
6:20 Could not find a declaration file for module 'element-ui/lib/locale/lang/en'. '/Volumes/SuperData/Sites/reelcrafter/rc-ts/node_modules/element-ui/lib/locale/lang/en.js' implicitly has an 'any' type.
  Try `npm install @types/element-ui` if it exists or add a new declaration (.d.ts) file containing `declare module 'element-ui';`
    4 | import store from './store';
    5 | import ElementUI from 'element-ui';
  > 6 | import locale from 'element-ui/lib/locale/lang/en';
      |                    ^
    7 | import VueDragDrop from 'vue-drag-drop';
    8 | import './styles/element-setup.scss';
    9 | import …

我正在使用vue.js和element-ui。

我想使用该upload-file组件将文件发送到我的服务器。

如果这样的文件已经存在，我想停止将文件加载到服务器。我想使用声称的方法abortor clearFiles，但不能。我的错误是什么？

HTML

<el-upload
     action="",
     :http-request="addAttachment",
     :on-remove="deleteAttachment",
     :before-upload="handleBeforeUpload",
     :file-list="fileList">
</el-upload>
<el-button size="small" type="success" @click="clearFiles">clear</el-button>

爪哇脚本

var vm = new Vue({
    data() {
        return {
            fileList: []
        };
    },
    methods: {
        handleBeforeUpload(file) {
            //if loading file exists in fileList - abort 
            if (findIndexInFileList(file) >= 0) {
                clearFiles(); //error
                this.clearFiles(); //.. and error
                vm.clearFiles(); //.. and also error
            }
        }
    }
}).$mount('#app');

vm.clearFiles(); //error!

使用 ElementUI 我希望能够将文本包装在空格上的列中，而不是在单词的中间。通常你会申请

white-space: normal;
word-wrap: break-word;

在普通列中，或用该样式包装在 div 中，但在使用 ElementUI el-table 和 el-table-column 时，它没有任何效果。我已经尝试将 el-table-column 作为一个类和一个直接应用的样式，但没有任何变化。

有没有人有任何使这项工作的经验？

我们可以这样向元素ui表列添加宽度：

<el-table-column
  prop="city"
  label="City"
  width="120">
</el-table-column>

但是，它仅产生一个像素值。

有什么解决办法如何使其使用百分比值？

我有个问题。我想根据条件显示选择。

这是示例。我想隐藏名称“杰夫”的选择

http://jsfiddle.net/8y5cnk1p/2/

如果我尝试使用“v-if”

<el-table-column type="selection" width="45" v-if="name != 'Jeff'" &nbsp;</el-table-column>

它不起作用。如何？

谢谢！

我正在使用 Element UI 单选按钮组，我想preventDefault()在触发更改事件时使用：

<el-radio-group @change="changeHandler" v-model="radio1">
   <el-radio-button label="New York"></el-radio-button>
   <el-radio-button label="Washington"></el-radio-button>
   <el-radio-button label="Los Angeles"></el-radio-button>
   <el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>

脚本：

methods: {
  changeHandler(value, e) { 
    // e is undefined
    // here should be preventDefault
  }
}

我尝试设置第二个参数来更改功能，但未定义。