有的写法可以cv
{
title: "序号",
customRender: (text, record, index) => `${index + 1}`,
align: "center",
},
{
title: "类型",
dataIndex: "type",
align: "center",
customRender: function (t) {
switch (Number.parseInt(t)) {
case 0:
return "区域";
case 1:
return "街道";
}
},
},
{
title: "时间段",
dataIndex: "playTimes",
scopedSlots: { customRender: "playTimes" },
align: "center",
},
{{ record.startTime }}~{{ record.endTime }}
{
title: "操作",
align: "center",
scopedSlots: { customRender: "action" },
width: 150,
},
deleteRecord(record)">
删除
重点:a-popconfirm气泡框
{
title: "级别",
align: "center",
dataIndex: "level",
scopedSlots: { customRender: "level" },
},
{{ text | textList(dictionaryList) }}
dictionaryList: [],
import { getDictionary } from "@/api/index";
//获取统一框架数据字典列表
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
})
}
getDictionary() {
getDictionary("district_level").then((res) => {
//dictionaryList上面定义过的 得到字典值
this.dictionaryList = res.data.data;
});
},
filters: {
textList(val, list) {
//这里看不懂的话可以打印下 val 和list 总的来说就是值相等返回代表的中文
let mm = "";
list.forEach((item) => {
if (item.value == val) {
mm = item.label;
}
});
return mm;
},
},
我说的动态action举例:比如在这个状态下我的action只有应用和详情,在那个状态下 我的actionshiyou 停止和详情 ,通过record.status判断
{
key: "action",
title: "操作",
fixed: "right",
align: "center",
scopedSlots: { customRender: "action" },
width: 200,
},
/**
* 表格枚举显示
*/
export function renderTypeName(
typeArr,
value
) {
//备注:类型如果是数字的且为0时,!value为false
if (!typeArr.length || value === "") return "--";
const currentArr = typeArr.filter(item => {
return item.value === value;
});
if (!currentArr.length) return "--";
return currentArr[0].text;
}
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
},
]
import { payTypeEnumList } from "@/enumeration/payTypeEnum.js";
import { renderTypeName } from "@/utils/util";
{
key: "payType",
title: "支付方式",
dataIndex: "payType",
align: "center",
// scopedSlots: { customRender: "payType" },
customRender(h) {
return renderTypeName(payTypeEnumList, h);
},
},
以上就是我做vue2时碰到表格渲染出现的问题
主要是字典,枚举和动态渲染action
-------------------------------------------------------------------------------------------------------------------------------