关于vue2+antd 信息发布后台不足的地方

有的写法可以cv

1.序号递增

{title: "序号",customRender: (text, record, index) => `${index + 1}`,align: "center",},

2.关于类型

  {title: "类型",dataIndex: "type",align: "center",customRender: function (t) {switch (Number.parseInt(t)) {case 0:return "区域";case 1:return "街道";}},},

3.关于  scopedSlots: 时间范围有效字段表格用法

  {title: "时间段",dataIndex: "playTimes",scopedSlots: { customRender: "playTimes" },align: "center",},

 <div slot="playTimes" slot-scope="{ record }">{{ record.startTime }}~{{ record.endTime }}</div>

4.关于删除

 {title: "操作",align: "center",scopedSlots: { customRender: "action" },width: 150,},

 <div slot="action" slot-scope="{ record }"><a-popconfirmtitle="删除会将同一区域的不同时间段数据一并删除，确认删除吗?"@confirm="() => deleteRecord(record)"><a :disabled="isDisabled">删除</a></a-popconfirm></div>

重点：a-popconfirm气泡框

5.关于字典

1.首先我先定义字段

 {title: "级别",align: "center",dataIndex: "level",scopedSlots: { customRender: "level" },},

2.其次我渲染字段

 <div slot="level" slot-scope="{ text }">{{ text | textList(dictionaryList) }}</div>

3.dictionaryList设置为空一开始初始化时候

 dictionaryList: [],

4.引入字典

import { getDictionary } from "@/api/index";

5.在@/api/index中获取统一框架数据字典列表 这是根据后端提供的api

//获取统一框架数据字典列表
export function getDictionary (type) {return request({// url: '/upms/dict/item/page',// url: '/upms/dict/item/' + id,url: '/upms/dict/type/' + type,method: 'get',// params: query})
}

6.获取字典

 getDictionary() {getDictionary("district_level").then((res) => {//dictionaryList上面定义过的 得到字典值this.dictionaryList = res.data.data;});},

7.看到步骤2那边时vue2的过滤器

  filters: {textList(val, list) {//这里看不懂的话可以打印下 val 和list 总的来说就是值相等返回代表的中文let mm = "";list.forEach((item) => {if (item.value == val) {mm = item.label;}});return mm;},},

6.关于动态的action,前面5种是虽然包含变换 但是还不够动态。

我说的动态action举例：比如在这个状态下我的action只有应用和详情，在那个状态下 我的actionshiyou 停止和详情 ，通过record.status判断

 {key: "action",title: "操作",fixed: "right",align: "center",scopedSlots: { customRender: "action" },width: 200,},

      <div slot="action" slot-scope="{ record }"><a @click="showApplication(record)" v-if="record.status != 1">应用</a><a @click="showCease(record)" v-if="record.status == 1">停止</a><a-divider type="vertical" /><a style="margin-right: 8px" @click="viewRecord(record)"> 详情 </a><astyle="margin-right: 8px"@click="editRecord(record)"v-if="record.status != 1">编辑</a><a-popconfirmtitle="确定删除吗?"@confirm="() => deleteRecord(record.id)"v-if="record.status != 1"><a>删除</a></a-popconfirm></div>

7.表格枚举显示和字典有点相似，找不到字典就自己写枚举

1.在utils文件夹里的utils.js写代码

/*** 表格枚举显示*/
export function renderTypeName(typeArr,value
) {//备注：类型如果是数字的且为0时,!value为falseif (!typeArr.length || value === "") return "--";const currentArr = typeArr.filter(item => {return item.value === value;});if (!currentArr.length) return "--";return currentArr[0].text;
}

2.新建enumeration文件夹，命名payTypeEnum.js

export const BALANCE = 'BALANCE';
export const SYS_BALANCE = 'SYS_BALANCE';
export const  MONEY = ' MONEY';
export const POS = 'POS';
export const  BANK = ' BANK';
export const WECHAT_PAY = 'WECHAT_PAY';
export const ALI_PAY = 'ALI_PAY';export const payTypeEnumList = [{text: '钱包余额',value: BALANCE},{text: '系统赠送金额',value: SYS_BALANCE},{text: '现金',value: BALANCE},{text: 'POS刷卡',value: POS},{text: '银行转账',value: BANK},{text: '微信扫码',value: WECHAT_PAY},{text: '支付宝扫码',value: ALI_PAY},
] 

3.在需要的文件引入这两个代码

import { payTypeEnumList } from "@/enumeration/payTypeEnum.js";
import { renderTypeName } from "@/utils/util";

4.使用

  {key: "payType",title: "支付方式",dataIndex: "payType",align: "center",// scopedSlots: { customRender: "payType" },customRender(h) {return renderTypeName(payTypeEnumList, h);},},

以上就是我做vue2时碰到表格渲染出现的问题 

主要是字典，枚举和动态渲染action 

-------------------------------------------------------------------------------------------------------------------------------