标签: element-ui

我正在使用，vue-js并且element-ui

我想检查表单验证的状态，而无需单击 submit button

例子

https://jsfiddle.net/nw8mw1s2/

重现步骤

单击每个字段

验证由模糊触发

开始填充不同的输入

题

当最后一个输入被验证时，我该怎么做， isFormValidated变成true.

换句话说，我怎么能说“如果没有状态错误的字段，则变为valudateState真”

提示

我想我们可以检查validateState每个formItem表格的 。但我看不出具体怎么做。

我无法在其事件处理程序中获取触发事件的 html 字段（在 javascript 中是event.target）。

我有一个表格：

• 附加到更改事件函数的输入元素
• 管理更改事件的函数

我的代码如下所示：

var Main = {
    methods: {
      change(par) {
        console.log("The value is: " + par);
        //HERE I can't get "event.target"
      }
    }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.0-beta.1/lib/index.js"></script>
<div id="app">
  <template>
    <el-input @change="change" placeholder="Input something here"/>
  </template>
</div>

我知道我可以调用不同的函数，并且在每个函数中我都知道谁是相对输入，但我想使用一个通用的。

按照我在element-ui.common.js事件触发代码中看到的堆栈跟踪：

handleChange: function handleChange(event) {
  this.$emit('change', event.target.value);
},

并且element只将值传递给事件处理程序。
无论如何，有什么想法可以得到event.target吗？

谢谢

我正在使用 element-ui 和 vuejs。我有一个看起来像这样的选择元素

<el-form-item label="City" prop="city">
     <el-select 
            v-model="form.city" 
            multiple 
            filterable
            remote
            auto-complete = "address-level2"
            no-match-text = "No data found"
            :remote-method = "remoteMethod"
            :loading = "loading"
            placeholder="Select City">
          <el-option
            v-for = "(item,index) in cities"
            :key = "index"
            :label = "item.name"
            :value = "item.key"
          ></el-option>
     </el-select>
</el-form-item>

现在我想在用户选择一个选项后触发这个选择的模糊事件，以便下拉选项折叠。

这是我的远程方法

remoteMethod: _.throttle(function(query) {
        this.loading = true;
        axios({
            method: 'get',
            url: someUrl
        }).then(response =>{
            if(response.data.status === false){
                this.$notify.error({
                    title: 'Error',
                    message: response.data.message
                });
            }
            else if(response.data.status === true && response.data.data.length != 0){
                this.loading …

我正在生成多个输入元素的列表，其中一个是<el-select>. 在更改此选择菜单时，我得到的值与该选择相关。但在这里，问题是，我还想获取父 v-for 项目的索引/行号。你可以通过下面的代码明白我的意思：

<el-form-item v-for="(domain, index) in Prescription.domains">
    <div class="col-md-2" v-if="medicineIsSelected === true">
        <small>Select Brand:</small>
        <el-select v-model="domain.SelectedBrand" clearable placeholder="Select" @change="updateDropdowns"> <!-- Here I want to pass {{index}} also -->
          <el-option
            v-for="item in selectedMedicineMetaInfo.BrandName"
            :key="item.value.name"
            :label="item.value.name"
            :value="item.value.rxcui">
          </el-option>
        </el-select>
    </div>
</el-form-item>

从上面的代码可以看出，我想在updateDropdowns. 我尝试传递 updateDropdowns(index) ，在这里我得到了索引号，但丢失了该下拉列表的选定值。我怎样才能同时通过？

我在我的项目元素 UI 自动完成组件中使用。

当输入没有结果时，我想显示无结果消息。
在其他项目中，我将其作为建议框中的选项（不可选择）：

但是，使用 element-ui 自动完成功能，搜索图标消失后，下拉菜单也会消失：

对于这个组件我无法做到这一点。任何想法？

我的代码如下所示：

模板：

<el-form ref="addressForm" :inline="true" :model="formData">
    <el-form-item prop="city">
        <el-autocomplete
                class="inline-input"
                v-model="formData.cityInput"
                :fetch-suggestions="getCities"
                placeholder="City"
                :trigger-on-focus="false"
                :clearable="true"
                @select="handleSelectCity"
                @clear="clearCity"
                size="small"
        ></el-autocomplete>
    </el-form-item>
        :
        :
    <el-form-item>
        <el-button type="primary" @click="onSubmit" size="small">
            Search
        </el-button>
    </el-form-item>
</el-form>

脚本：

export default {
    data() {
        return {
            formData: {
                cityInput: "",
                city: "",
                :
                :
            },
        }
    },

    methods: {
        getCities(query, callback) {
            this.clearCity();

            // Ajax call to obtain results for autocomplete
            axios.get(
                "/cities", {
                    query: …

我正在使用元素 ui 的el-select标签。我的选项内部文本太大。我想把它包起来。

这是一个js 小提琴。

这是一个现有的例子。

但我不想省略溢出的词。我想将溢出的单词包装到第二行。不仅选择选定的值。如果溢出，所有选项都必须换行到第二行。我想用纯 css或 vue js 方法来做。有什么方法可以包装单词吗？

我正在使用 ElementUi NavMenu，并使用渲染函数和createElement方法来制作菜单项，只需使用带有菜单标题和索引的 JSON，只是 HTML 和 JS 文件，而不是 .vue 文件。

菜单已安装，单击时会显示子菜单，但子菜单 (el-menu-item) 的操作不起作用。我什至尝试属性 click, item-click, v-on: click when created the-menu-item （ElementUi 的文档告诉@click必须使用，但这会导致createElement定义属性时出错），但没有人工作，没有错误发生，就好像该方法没有被声明。

只有onclick属性对el-menu-item有效，但是当我使用它时，没有调用vue组件的方法，所以我必须在组件之外（例如在一个类上）创建一个函数，并且当这个函数是调用它执行对组件方法的调用（我尝试$发出）并发生错误，因为找不到组件的方法。

如何@click在组件的渲染函数内的 el-menu-item 上添加（或类似）事件以调用同一组件的方法？

ElementUI 的 NavMenu 文档。

我如何创建菜单项：

createElement("el-menu-item",{
    attrs:{
        index:json[i].id,
        click:json[i].onclick
    }},
    json[i].title
)

我有两个日期选择器用于startDate和endDate.在startDate Picker中,我想在endDate之前禁用所有日期,反之亦然.如何使用elemnt-ui禁用日期.>

<el-table :data="confirmedAppointments" highlight-current-row style="width: 100%">
                  <el-table-column type="index" width="50">
                  </el-table-column>
                  <el-table-column prop='token' label="Token" width="180">
                  </el-table-column>
                  <el-table-column prop='date'  label="Appoint. date" width="180">
                  </el-table-column>
                  <el-table-column prop='ROV' label="ROV" width="180">
                  </el-table-column>
                  <el-table-column prop='speciality' label="Speciality" width="180">
                  </el-table-column>
                  <el-table-column prop='time' label="Appoint. time" width="180">
                  </el-table-column>
                  <el-table-column prop='status' label="Status" class="red" v-bind:class="{ 'green': status == 'Accepted' }">
                  </el-table-column>

              </el-table>

我正在使用与动态数据映射的 Element UI 表组件。在最后一列中，我的状态显示 Approved 或 Rejected 文本。

那么如何根据单元格值将特定类设置为特定单元格。默认情况下，该类应为红色，但当状态值为 Approved 时，该类应为绿色。

我正在寻找一个使用 Element UI 表组件而不必对所有列进行硬编码的示例。我见过的所有示例，包括官方 Element UI 表文档，都显示了模板中指定的每一列。

我正在尝试做这样的事情。在我的旧表格组件中，这为我提供了所有列和带有delete按钮的额外结束列。

<template>
  <div v-if="tableData.length > 0">
    <b-table striped hover v-bind:items="tableData" :fields=" keys.concat(['actions']) ">
      <template slot="actions" slot-scope="row">
        <b-btn size="sm" @click.stop="tableClick(row.item)" class="mr-1">
          Delete
        </b-btn>
      </template>
    </b-table>
  </div>
</template>

相比之下，Element UI Table 示例都使用多个重复的el-table-column标签。由于在运行时加载具有不同列的数据，我无法使用这种方法。

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="Date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address">
      </el-table-column>
    </el-table>
  </template>

我是一个初学者，正在努力理解如何使用 el-table 实现我的目标。