<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 时，该类应为绿色。
尝试使用 webpack4 使用 Vue 和 ElementUI 设置项目。我想从 CDN 中提取 Vue 和 ElementUI，所以我有以下 webpack 配置
module.exports = {
mode: "development",
entry: ["./app.js"],
externals: {
vue: "Vue",
"element-ui": "ElementUI"
},
module: {
rules: [
{
test: /.vue$/,
use: "vue-loader"
},
{
test: /.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /.ttf$|.woff$/,
use: [{ loader: "url-loader", options: { limit: 10000 } }]
}
]
}
};
我的 html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link …我有照片的 el-select 选项，在选项中我可以获得照片变量，但在默认值下我无法获得照片的默认值。
你能帮助我吗？
预期：默认值为麦当劳（照片+标签）
这是我的代码：
<el-select v-model="value" placeholder="Select">
<el-option v-for="item in outlet" :key="item.value" :label="item.label" :value="item.value">
<img :src="item.photo"> {{ item.label }}
</el-option>
</el-select>
这是我的小提琴：
组件之间的字体样式/字体不是标准的。例如 ：
如何以“ element-ui”方式解决此问题？谢谢。
元素UI版本：2.4.6
我将 Element UINavMenu与:router="true". 当我单击菜单链接（路由更改和活动菜单项更改）时，它工作正常。我遇到的问题是，当我单击浏览器导航按钮（back和forward）时，路由和组件会更改，但NavMenu活动选项卡不会更改。
NavMenu在使用浏览器导航按钮时，是否有一种简单的方法可以确保当前路线与彼此保持同步？我正在vue-router与mode: 'history'. 我原以为这会自动处理。
我正在使用 Element-UI 中的 el-select 进行多重、可过滤和远程搜索。我有一个对象数组作为元素的 v-model，其中已经存在一些值。加载页面时，标签中没有任何文本，也不会显示在选择框中。我添加了 value-key，它确实在下拉列表中显示了当前元素。不知道出了什么问题，代码链接： jsfiddle
<el-select
v-model="value9"
multiple
value-key="state"
filterable=""
remote=""
reserve-keyword
placeholder="Please enter a keyword"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options4"
:key="item.state"
:label="`${item.state} (${item.state})`"
:value="item">
</el-option>
我已经使用 Element-ui 编写了表格代码。我需要可排序的列，但它不起作用。我不知道是什么原因。是不是数据格式不对？
太棒了
<el-table v-loading="listLoading" :data="list">
<el-table-column type="selection" > </el-table-column>
<el-table-column label="NO" fixed width="100" sortable><template slot-scope="scope">{{ scope.row.number }}</template></el-table-column>
<el-table-column v-for="head in formThead" :key="head.value" :label="head.title" :min-width="head.celwidth ==null ? 100: head.celwidth" :sortable="head.sortable">
<template slot-scope="scope">
{{ scope.row[head.value] }}
</template>
</el-table-column>
</el-table>
formThead: [
{ value: 'dest', title: 'Dest', celwidth: 110, sortable: true }, { value: 'date', title: 'Date' }, { value: 'pcs', title: 'PCS', celwidth: 80 }],
list?[
{"number": "2", "dest": "AAA", "date": "2019-01-01", "pcs": "2"},
{"number": "3", "dest": "ABB", "date": "2019-01-02", "pcs": …我正在使用 vuejs 2.6.10 和 element-ui 2.12.0 并在 el-table 中显示数据。到现在为止还挺好。
在列标题中，我想显示输入字段以过滤数据，但我只想按需显示这些输入（单击按钮后）。所以我想使用这样的自定义标题：
<el-table-column prop="name" label="Name" width="180">
<template slot="header">
Name <br/>
<!-- show input only on demand -->
<el-input v-show="bool"></el-input>
</template>
</el-table-column>
问题来了：当 bool 的值发生变化时，什么也不会发生。
经过几次测试后，我意识到标头模板似乎不是响应式的。
我找到了一种切换输入的解决方法：强制 el-table 重新渲染...
<el-table v-if="showTable" ...>
methods: {
toggleInputs() {
// toggle bool
this.bool = !this.bool;
// force re-render table...
this.showTable = false;
this.$nextTick(() => (this.showTable = true));
}
}
有用。但这一点也不干净，重新渲染一张不太大的桌子需要一些时间......
这是完整的示例：https : //jsfiddle.net/olivierlevrey/pyvc6kht/2/
有人有更好的解决方案来使自定义标头具有反应性吗？
我正在尝试使用 Element UI 的 Select 并将整个对象作为值。正如您在我的示例中看到的，所选值正在更改，但当前值的标签没有更改。我不知道为什么。另外，选择选项中的所有标签都是粗体，但只能选择一个。
脚本：
data() {
return {
options: [
{
id: 1,
type: 'USER',
age: 15
}, {
id: 2,
type: 'ADMIN',
age: 22
}
],
value: null
}
}
模板：
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.id"
:label="item.type"
:value="item">
</el-option>
</el-select>
演示： https://codepen.io/peter-peter-the-typescripter/pen/qBNeKEp
我正在尝试将 Element UI 添加到我的 Vue3 项目中：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
App.use(ElementUI)
createApp(App).use(store).use(router).mount('#app')
所以我正在关注此文档https://element.eleme.io/#/en-US/component/quickstart但它给了我这个错误： types.js?a742:39 Uncaught TypeError: Cannot readproperties of undefined (reading '原型'）
我不知道我在这方面做错了什么。