前言：ant design vue是Ant Design 的 Vue 实现，相对与element ui来说组件功能更加的丰富,本文主要记录在使用组件过程中遇到的问题，后续不断更新
1.树形组件实现只能选择最后一级
根据文档示例可以看出，实现此效果只需要在需要禁用的层级中加入 disabled: true即可实现，上代码
// 定义树形组件数据为treeList
getDisabled(data) {
data.forEach(item => {
if (item.children) {
item.disabled = true
this.getDisabled(item.children)
}
this.treeList = data
})
}
2.树形组件自定义字段
// 组件添加
:fieldNames="{ title: 'name', children: 'children' }"
3. 表格中使用多个文本框下拉框等，填写数据不能赋值，请参考
// 为表格中的文本框等添加change事件，其中TableData为列表数据，fieldName为表数据标识
hanelChangeSearch(text, record,index, column) {
const newData = [...this.TableData]
const target = newData.filter(item => record.fieldName === item.fieldName)[0]
if (target) {
target[column.key] = text
this.TableData = newData
}
}
4.清空表单单个验证
this.$refs.baseForm.clearValidate(['anlkl']);
5.删除对象数组中某个属性
// 第一种
var arr = [{id: 1,name: '22', age: 3},{id: 2,name: '2233',age: 3},{id: 3,name: '22343',age: 3} ]
var arr1 = []
arr.map(item => {
const {name, age,...saveItem} = item;
arr1.push(saveItem)
})
console.log(arr1)
// 第二种
var arr = [{id: 1,name: '22', age: 3},{id: 2,name: '2233',age: 3},{id: 3,name: '22343',age: 3} ]
arr.map(item => {
delete item.name;
})
console.log(arr)
6. HTML5 - contenteditable 富文本编辑
<p contenteditable="true">这里可编辑</p>
7.window.open()跳转到其他网站时，有些网站可以正常访问，有些则访问不了，出现HTTP ERROR ，但是单独去访问这些地址又是可以正常访问的。
解决办法，在index.html中增加<meta name="referrer" content="no-referrer" />
主要用于控制客户端发送给服务端的referrer信息，告诉服务端一些客户端的信息，用来表示当前请求是从哪个页面跳转来的，也就是访问来源。
8.数据根据id去重
var arr = [...new Map(list.map(item => [item.id, item])).values()]
9、柱状图x轴文字前增加圆圈样式
// 初始化柱状图
initEcharts() {
let option = {
// title: {
// text: '业务单据量及对应处理资产量',
// left: 'center' // 标题居中
// },
xAxis: {
data: this.xData,
// 在文字前增加圆圈
axisLabel: {
formatter: function (value) {
if (value === '固定资产折旧') {
return `{a|} ${value}`;
} else if (value === '无形资产摊销折旧') {
return `{b|} ${value}`;
} else if (value === '长期待摊费用折旧') {
return `{c|} ${value}`;
} else if (value === '投资性房地产折旧') {
return `{d|} ${value}`;
} else if (value === '油气资产折旧') {
return `{e|} ${value}`;
}
},
rich: {
// align: 'left',
a: {
backgroundColor: '#3376F5',
borderRadius: 5, // 圆圈的边框半径
width: 10, // 圆圈的宽度
height: 10 // 圆圈的高度
},
b: {
backgroundColor: '#EDAE3D',
borderRadius: 5, // 圆圈的边框半径
width: 10, // 圆圈的宽度
height: 10 // 圆圈的高度
},
c: {
backgroundColor: '#E6E0F1',
borderRadius: 5, // 圆圈的边框半径
width: 10, // 圆圈的宽度
height: 10 // 圆圈的高度
},
d: {
backgroundColor: '#D3F891',
borderRadius: 5, // 圆圈的边框半径
width: 10, // 圆圈的宽度
height: 10 // 圆圈的高度
},
e: {
backgroundColor: '#EEDFE2',
borderRadius: 5, // 圆圈的边框半径
width: 10, // 圆圈的宽度
height: 10 // 圆圈的高度
}
}
}
},
yAxis: {
type: 'value'
},
tooltip: {
show: true,
trigger: 'axis', // item | axis | none 触发类型
formatter: '{b0}: {c0}', // 提示框内容
position: function (pt) { return [pt[0], '10%']; },
// backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色
// borderColor: '#333', // 提示框浮层的边框颜色
// borderWidth: 0 // 提示框浮层的边框宽度
},
// grid: {right: 40, top: 70, left: 60, bottom: 80},
legend: {
right: 0
},
series: [
{
name: '',
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
itemStyle: {
normal: {
color: function (params) {
var colorList = ['#3376F6', '#EDAE3D', '#E6E0F1', '#D4F891', '#EEDFE2'];
return colorList[params.dataIndex % colorList.length];
}
}
},
barWidth: 50
}
]
}
const myChart = echarts.init(document.getElementById('mychart'));
myChart.setOption(option);
// 随着屏幕大小调节图表
// window.addEventListener('resize', () => {
// myChart.resize();
// });
},
