ant vue中给table列自定义样式

效果图

代码

columns: [
	{ title: '序号', dataIndex: 'index', align: 'center', width: '5%', scopedSlots: { customRender: 'index' } },
	{
		title: '版本名称',
		dataIndex: 'versionName',
		align: 'center',
		ellipsis: true,
		customCell: (record) => {
			//条件成立才显示自定义样式
			if(record.isDefault){
				return {
					style: {
						backgroundImage: "url(" + require("@/assets/icons/default.svg") + ")",
						backgroundRepeat: "no-repeat",
						backgroundSize: "30%",
						backgroundPosition: '105% -7px',
					}
				}
			}
		},
	},
	{ title: '版本号', dataIndex: 'versionNo', align: 'center' , ellipsis: true },
],

vue3写法

columns.splice(1, 0, {
    title: typeName.value + '单编号', dataIndex: 'formNo', align: 'center', width: '160px',
    customCell: (record) => {
      if(record.formLevel === '2'){
        return {
          style: {
            backgroundImage: "url("+ _this.$myUtil.getAssetsFile('icons', 'urgent.svg') + ")",
            backgroundRepeat: "no-repeat",
            backgroundSize: "25%",
            backgroundPosition: '100%',
          }
        }
      }
    },
  });

 /**
  * 获取assets目录下的文件
  * @param url
  * @param fileName
  * @returns {string}
  */
 getAssetsFile(url, fileName) {
     return new URL(`../assets/${url}/${fileName}`, import.meta.url).href;
 },

差别不大，只是 require 在 vite + vue3 中不支持，改成使用 new URL(） 获取地址
更新于2024-01-25