这篇博客主要介绍了在使用IVIEW框架时，如何配置表格的弹框操作、状态按钮、状态码翻译、序号显示以及下拉框组件的实现。通过具体的代码示例，详细解释了如何处理表格中的各种交互和展示需求。
1、首先是界面的配置，在router里面的routers.js里面配置文件的路径，菜单等等
2、关于表格里面的弹框
代码：
{
key: "operation",
title: "操作",
align: "center",
width: 300,
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "primary",
size: "small"
},
style: {
marginRight: "5px"
},
on: {
click: () => {
this.carBindSelect = params.row.carBindSelect;
this.carBindSelectIndex = params.index;
this.carBind = true;}}},
"车辆"),
h("Button",{
props: {
type: "primary",
size: "small"
},
style: {
marginRight: "5px"
},
on: {
click: () => {
this.formInline = JSON.parse(
JSON.stringify(params.row.formInline)
);
this.arrangementIndex = params.index; //后要删除
this.arrangement = true;}}},
"自动排班"),
h("Button",
{
props: {
type: "primary",
size: "small"
},
style: {
marginRight: "5px"
},
on: {
click: () => {
this.info(params.row, "edite");}}},
"编辑"),
h("Button",
{
props: {
type: "error",
size: "small"
},
style: {
marginRight: "5px"
},
on: {
click: () => {
this.listDelete(params.index);}}},
"删除")]);}}
2、表格里面的状态按钮
{
title: "状态",
key: "status",
align: "center",
render: (h, params) => {
return h("div", [
h("i-switch", {
//数据库1是已处理，0是未处理
props: {
type: "primary",
value: params.row.status === 1 //控制开关的打开或关闭状态，官网文档属性是value
},
style: {
marginRight: "5px"
},
on: {
"on-change": value => {
//触发事件是on-change,用双引号括起来，
//参数value是回调值，并没有使用到
this.changeListState(value, params.row); //params.index是拿到table的行序列，可以取到对应的表格值
}}})]);}},
3、表格里面的文字转译（后台传状态码过来，前端负责做翻译）
4、表格里面的序号
或者：type：‘index’，也可以
{
title: "编号",
type: "index",
width: 80,
align: "center",
},
5、关于表格里面的状态码翻译，后台返回回来的是1234，我要翻译成中文显示在表格里面。
6、下拉框的另一种写法
<FormItem class="form-item" label="网络类型" prop="networkType">
<Select v-model="networkType">
<Option
v-for="item in networkTypeList"
:value="item.value"
:key="item.value"
>{{item.label}}</Option>
</Select>
</FormItem>
networkTypeList: [{value: "1",label: "2G"},{value: "2",label: "4G"}],
扫一扫
3904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
