简介

主要有，Table组件空值处理，title 居中，Table组件排序。日期组件处理。组件样式穿透等功能。

ant design Table组件优雅的给空内容添加 “--“ 值

在项目中使用到Ant DesignUI的table组件能所遇到的小问题，给表格空值设置"--"值。或根据值显示对应内容。

表格组件

<template>
  <a-table :columns="myColumns" :data-source="myData" bordered></a-table>
</template>
<script>
// 表格数据
const myColumns = [
  { title: '企业名称', dataIndex: 'investeeName', key: 'investeeName'},
  ...
];
const myData = ref(<any>[]);
</script>

CustomRender 实现

CustomRender是一些编程语言中的一个功能，允许开发人员自定义某些元素的渲染。这对于创建更动态和交互式的用户界面非常有用。通常情况下，CustomRender可用于修改按钮、窗体或表等元素的外观或行为。

const myColumns = [
  ...
  { title: '融资金额', dataIndex: 'investAmount', key: 'investAmount', customRender: ({text}) => {
        return text ? text:'--';
    }},
  ...
];

const myColumns2 = [{ title: '类型', dataIndex: 'type', customRender: (text, record) => {
        if (text === 0) {
          return '客户1'
        } else if (text === 1) {
          return '客户2'
        } else if (text === 2) {
          return '客户3'
        }
      }
    }
 ]

数据处理

数据处理，根据数据类型，给空值设置"--"值。

myData.forEach((item:any)=>{
    for (let key in item) {
      if (item.hasOwnProperty(key)) {
        if(!item[key]){
          item[key] = '--';
        }
      }
    }
})

css 处理

css 选择器，给表格空值设置"--"值。

:deep(.ant-table-cell):empty:after,:deep(.ant-table-cell) span:empty:after {
  content: '--';
}

ant design Table组件排序

表格组件排序，根据排序字段，对表格数据进行排序。前端联处理，点排发送条件到服务器排。

<template>
  <a-table :columns="equityColumns" :data-source="equityData" :pagination="false" @change="handleTableChange" :scroll="{ x: '100%' }" bordered>
      <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'operation'">
              <a-button @click="operationClick(record)" style="border:1px solid #f7ba69;color:#f7ba69" danger>详情</a-button>
          </template>
      </template>
  </a-table>
</template>
<script lang="ts" setup>
// 请求条件
const formData = reactive<any>({
    ...
    sorts:[],
    total:0,
    pageNum: 1,
    pageSize: 10
})

// 表格数据 , defaultSortOrder: 'descend' ascend,
const equityColumns = [
  ...
  { title: '融资金额', dataIndex: 'investAmount', key: 'investAmount', width: 80, sorter: true },//排字段sorter: true
  { title: '融资时间', dataIndex: 'investTime', key: 'investTime', width: 80, sorter: true, defaultSortOrder: 'descend' },//排字段，默认升序defaultSortOrder: 'descend'
  { title: '详情', dataIndex: 'operation', key: 'operation', width: 100, align:'center' }//按钮详情
];
const equityData = ref(<any>[]);

// 点击排序处理
const handleTableChange = (pagination:any, filters:any, sorter:any) => {
      if (sorter.order) {
        let sortField = sorter.field;
        let sortOrder = sorter.order === 'ascend' ? 'asc' : 'desc';
        let mBool = false;
        formData.sorts.forEach((item:any)=>{
            if(item.key === sortField){
                mBool = true;
                item.method = sortOrder;
            }
        })
        if(!mBool){
            formData.sorts.push({key:sortField,method:sortOrder});
        }
      }else{
        formData.sorts = formData.sorts.filter((item:any) => {
            return item.key != sorter.field;
        })
      }

      //发送请求到服务器
};
</script>

ant design Table组件,title 居中

表格组件，title 居中。css处理，配置处理。

:deep(.ant-table-thead) th {
    font-weight: bold;
    text-align: center;
}

// 表格配置, align:'center' 表头内容居中
const analysesColumns = [
  { title: '时间', dataIndex: 'investYear', key: 'investYear', align:'center' },
  { title: '行业', dataIndex: 'industry', key: 'industry', align:'center'},
  ...
];

ant design 日期组件处理

<template>
  <a-range-picker v-model:value="investTimeExtValue" size="small" :placeholder="['开始日期', '结束日期']" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" @change="loanTimeChange"/>
</template>

<script>
// format="YYYY-MM-DD" 显示格式
// valueFormat="YYYY-MM-DD" 提交格式
// :placeholder="['开始日期', '结束日期']" 提示文字

const loanTimeChange = (value:any)=>{
    if(Array.isArray(value)){
        formData.loanTimeInput = value.join(' ~ ');
    }
}
</script>

ant design 组件样式穿透

/* 日期选择器文字居中 */
:deep(.ant-picker-input) input {
  text-align: center;
}
/* 日期选择器圆角 */
:deep(.ant-picker) {
  border-radius: 6px;
}
/* 数值input圆角 */
:deep(.ant-input-number) {
  border-radius: 6px;
}
/* 下拉框圆角 */
:deep(.ant-select:not(.ant-select-customize-input)) .ant-select-selector {
  border-radius: 6px;
}


/* 表格空值填充 -- */
:deep(.ant-table-cell):empty:after,:deep(.ant-table-cell) span:empty:after {
  content: '--';
}