文章目录
- 一、vue中使用el-table的type=index有时不显示序号
- Table 表格
- 显示索引
- 自定义索引
- 报错信息
- 解决方案
- 二、vue中Missing required prop: “value” 报错
- 报错原因
- 解决方案
- 三、el-table的索引值index在翻页的时候可以连续显示
- 方法一
- 方法二
- 四、vue3中Element Plus全局组件配置中文的两种方案
- 1.在 App.vue 的文件中修改
- 2.在main.js的文件中修改
- 国际化
一、vue中使用el-table的type=index有时不显示序号
Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。
显示索引
如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。
<el-table-column
type="index"
width="50">
</el-table-column>
自定义索引
通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。
<el-table-column
type="index"
:index="indexMethod">
</el-table-column>
methods: {
indexMethod(index) {
return index * 2;
}
}
报错信息
el-table中通过type=index来显示序号。有时候序号不能正常显示。
解决方案
使用template来换一种写法
<el-table-column label="序号" width="50" align="center">
<template slot-scope="scope">{{scope.$index+1}}</template>
</el-table-column>
二、vue中Missing required prop: “value” 报错
报错原因
- 表单中没有进行双向数据绑定（v-model）
<el-form-item label="活动名称">
<el-input></el-input>
</el-form-item>
- el-option没有进行value赋值
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label">
</el-option>
</el-select>
解决方案
- 表单中每一项都要使用v-model绑定
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
- el-option进行value赋值
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
若el-select进行了双向数据绑定，且每一项el-option都进行了value赋值，然而还报了这个错，这时需要检查下每一项绑定value的变量是否都在数组中存在。
三、el-table的索引值index在翻页的时候可以连续显示
方法一
通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
type="index"
:index="indexMethod">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return { }
},
methods: {
indexMethod(index) {
// index 当前序号，pageSize 每页显示的条数，currentPage 当前页码
return index + this.pageSize * ( this.currentPage - 1 ) + 1
}
}
};
</script>
方法二
通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
type="index">
<template slot-scope="scope">
<span>{{ scope.$index + pageSize * ( currentPage - 1 ) + 1 }}</span>
</template>
</el-table-column>
</el-table>
</template>
四、vue3中Element Plus全局组件配置中文的两种方案
Element+是一款用于制作页面样式，设计页面结构的框架。相比于其他的几个框架，这个框架设计的更为人性化，对企业级框架VUE的集成也很高。
Element Plus 组件 默认 使用英语，如果你希望使用其他语言，你可以参考下面的两种方案。
1.在 App.vue 的文件中修改
<template>
<el-config-provider :locale="locale">
<router-view></router-view>
</el-config-provider>
</template>
<script setup>
// // 引入配置组件
import { ElConfigProvider } from 'element-plus'
// 引入中文包
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
const { locale } = reactive({
locale: zhCn,
});
</script>
2.在main.js的文件中修改
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {
locale: zhCn,
})
国际化
Element Plus 还提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置。
<template>
<el-config-provider :locale="locale">
<app />
</el-config-provider>
</template>
<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
export default defineComponent({
components: {
ElConfigProvider,
},
setup() {
return {
locale: zhCn,
}
},
})
</script>
