标签: element-ui

我使用Element.ui树组件在Vue上创建一个SPA(类似于云盘),以显示文件夹树.问题是树本身不会立即加载所有内容,而是在惰性修饰符的帮助下顺序加载.

服务器部分是mongoose + mongoose-path-tree.使用mongoose-path-tree意味着数据库中的树存储方案是下一个:每个节点都不知道它的子节点,但是子节点将它们的完整路径存储到根元素:

#root_id #subroot_id # ... #parent_id #this_id

问题是如果用户对树进行更改(加载文件,创建新文件夹等)并且服务器接受它们,那么如何通知树它需要加载新数据.元文件ui在其文档中没有描述如何捕获事件以导致重绘树.

客户端树模板

<el-tree
 :props="defaultProps"
 :load="loadNode"
 @node-click="handleNodeClick"
 :expand-on-click-node="false"
 lazy
 node-key="id"
 ref="tree"
 />

加载新节点

loadNode: async function (node, resolve) {
try {
  let firstGeneration = await foldersAPI.get(this.$store.state.user.myDrive);
  if (node.level === 0) {
    return resolve(firstGeneration.data.folder.children);
  } else {
    var data;
    if (node.data.hasChildren) {
      let children = await foldersAPI.get(node.data._id);
      console.log(children);
      data = children.data.folder.children;
    } else {
      data = [];
    }
    resolve(data);
  }
} catch (e) {
  console.log(e)
}

我有一个使用element-ui组件的组件.

Tree.vue

<div>
  <el-tree :data="treeData" :props="config"></el-tree>
</div>

我想测试与组件(例如,能够点击的一个交互el-tree的HTML元素),但是当我使用vue-test-utils mount到安装Tree组件,它不会使它的孩子组件,喜欢shallow荷兰国际集团的组件而不是.

Tree.test.js

import Vue from 'vue';
import { mount } from 'vue-test-utils';
import Tree from './Tree.vue';

const wrapper = mount(Tree);

it('renders element ui tree component', () => {
  console.log(wrapper.html());
});

输出:

<div><el-tree data="[object Object],[object Object]" props="[object Object]"></el-tree></div>

知道如何完全渲染Tree组件,包括它的孩子？

我正在尝试基于vue.js和element-ui组件制作一个响应式SPA。它具有开箱即用的响应式布局，并且工作正常，但我不知道如何使NavMenu（el-menu）组件向上移动或隐藏在移动设备上的“汉堡”下。
当前结果只是内容上方的垂直菜单，因此您需要向下滚动一会儿。
我的app.vue布局：

<el-row>
    <el-col>
        <el-row type="flex" justify="space-between" align="middle">
            <el-col :span="6">
                <img src="/Assets/images/logo.png" width="64px" align="left" />
                <h2>Admin</h2>
            </el-col>
            <el-col :span="2">
                <sign-in></sign-in>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :xs="3" :lg="8" :xl="3">
                <el-menu v-if="user.authenticated" style="min-height: 960px; background-color: #fff" v-bind:router="true">
                    <el-menu-item index="/offers">
                        <i class="el-icon-star-off"></i>
                        <span>Offers</span>
                    </el-menu-item>
                    ...
                </el-menu>
            </el-col>
            <el-col :xs="21" :lg="16" :xl="21">
                <router-view style="width:100%;"></router-view>
            </el-col>
        </el-row>
    </el-col>
</el-row>

我正在对Vue中的Jest和Element-ui进行单元测试，该组件包含一个带有2个选项的select。我从下拉菜单中选择一个选项，然后检查是否已调用操作。

1）使用normal select和optionHTML标签，可以完美地工作。

// Fruit.vue

<template lang="pug">
  select(
    v-model="fruit"
  )
    option(
      v-for="item in fruits"
      :label="item.label"
      :value="item.value"
    )
</template>
<script>
export default {
  data () {
    return {
      fruits: [
        {
          label: 'Banana',
          value: false
        },
        {
          label: 'Apple',
          value: false
        }
      ]
    }
  },
  computed: {
    fruit: {
      get () {
        return this.$store.state.fruit
      },
      set (fruit) {
        this.$store.dispatch('setSelectedFruit', { fruit })
      }
    }
  }
</script>

// DOM

<select>
  <option label="Banana" value="false"></option>
  <option label="Apple" value="false"></option>
</select>

// …

我正在使用具有可扩展行功能的表。单击展开图标时，行将展开，您可以在此处查看示例。但是，我想做的是，整个行都可单击，并切换扩展和折叠行，就像单击扩展图标时一样。

请帮忙。

这是我的标记：

<template lang="pug">
  el-table(:data="tableData")
    el-table-column(label="Employee Name", prop="userName")
    el-table-column(label="Company Name", prop="companyName")
    el-table-column(type="expand", align="right" )
      template(slot-scope="props")
        p User Name: {{ props.row.userName }}
        p Company Name: {{ props.row.companyName }}
</template>

我遇到这个问题：我试图使用输入表单中的值（<el-input>在示例中）修改对象的属性之一。我们公司的堆栈使用 VueJs + TS + ElementUI。不幸的是，对象的属性似乎不能是反应性的并且处于只读模式。如何使对象属性具有反应性？

HTML/CSS

<el-input v-model="group.groupDescription" type="textarea"></el-input>

JS：

interface ViewGroupResult {
  id: string;
  groupDescription: string;
}

import Vue from 'vue';
import {Component, Watch} from 'vue-property-decorator';
@Component
apollo: {

  group: {
    query() {
          group(groupId: $groupIdOrSlug) { ... }
        }
    },
    variables() {
      groupId: this.id
    },
    fetchPolicy: 'network-only',
    loadingKey: 'groupLoading'
  },

export default class ViewGroupPage extends Vue implements 
    group: ViewGroupResult | null = null;

当我尝试在上面的文本区域中键入某些内容时，组对象的属性的值永远不会更新，group.groupDescription即使它与v-model指令绑定也是如此。

Error in event handler for "input": "TypeError: Cannot …

我试图在点击时重定向到另一个页面，由于某种原因它不起作用。这是我的 vue 上重定向按钮所在的代码。我尝试了两种不同的方法，但都不起作用。

<el-row class="import-btn">
    <a :href="'/imports/teachers'">
        <el-button type="warning">
            Importar
        </el-button>
    </a>
</el-row>
<el-row class="import-btn">
    <el-button type="warning" @click="redirectStudents()">
        Importar
    </el-button>
</el-row>

redirectStudents() {      
  this.$inertia.visit('/imports/students');
},

我有这样的 web.php 路由

Route::resource('imports/students', 'ImportStudentController');
Route::resource('imports/teachers', 'ImportTeacherController');

在两个控制器中，我目前只填充了index()

public function index()
{
   return Inertia::render('Import/Students');
}

public function index()
{
    return Inertia::render('Import/Teachers');
}

在教师和学生的 vue 文件中，我有这些页面的基本布局和标题，因此它们不是空的。

当我单击该<a :href="">按钮时，我会被重定向到该链接，但页面完全空白，当我单击另一个按钮时，它会打开，就像一个窗口一样，里面也是空白的。

解决这个问题的正确方法是什么？

我无法在其事件处理程序中获取触发事件的 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 …

我必须根据表中的结果列为 false 添加红色背景颜色，为 true 添加绿色背景，我使用 elementUI + 数据表分页 + vuejs。我尝试通过在结果列上使用样式绑定来添加列声明，提前致谢

我的模板代码

<template slot="header" slot-scope="table" :style = "customRowBackground(table.row)">
<template slot-scope="table">{{ table.row.launch_success }}</template>
</el-table-column>

我的 customRowBackgrond() 函数

 customRowBackgrond({row}){     
      if (row.launch_success == true) {
        return {'backgrondColor': 'rgb(252, 230, 190)'};
      } 
      else if (row.launch_success == false) {
        return { backgrondColor: 'rgb(252, 230, 190)'};
      } 
      else {
        return {backgrondColor: 'rgb(252, 230, 190)'};
      }
    },

我需要在我的整个表中获得绿色的真实值和红色的假值......提前致谢。