关于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-popconfirm
            title="删除会将同一区域的不同时间段数据一并删除，确认删除吗?"
            @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>
          <a
            style="margin-right: 8px"
            @click="editRecord(record)"
            v-if="record.status != 1"
          >
            编辑
          </a>
          <a-popconfirm
            title="确定删除吗?"
            @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为false
  if (!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

---