1.表格合并单元格后，发现行高异常，比普通行高要高很多
tableAttrs: {
'row-col-span': (cellData) => {
const { rowIndex, columnIndex } = cellData;
// 合并第一行
if (rowIndex === 0 && columnIndex === 0) {
return {
rowspan: 1,
colspan: 11
};
}
// 第一行除了第一列以外的列要清空
if (rowIndex === 0 && columnIndex !== 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
2.当想要改变组件的样式不生效时，可以试着在类名前加 /deep/
3.想要修改表格行里文本的显示
attrs: {
label: '采购标识',
prop: 'orderCode'
},
render (h, scope) {
return h('span', {}, scope.row.orderCode ? scope.row.orderCode : '--');
}
- 表头加slot插槽
slot: {
header: 'producteHeaderSlot', // 表头插槽
default: 'producteSlot' // 普通列表项插槽
}
5.表头加插槽，并且获取当前列的数据
image.png
6.输入框通过点击下拉框选项来赋值时，校验规则显示为空，这时是因为，点击下拉框赋值的时候没有触发校验，可以在点击下拉框时的方法中，加入clearValidate方法
handleChoiseTipsFunc(name:any) {
this.formCustom.name = name;
if (name) {
(this.$refs.formCustom as any).clearValidate('name');
}
}
7.表格多选后怎么获取选择的列表数据
- tableCfg里添加
tableAttrs: {
// selectedData页面自定义一个数组
selection: selectedData
},
col: [
{
attrs: {
type: 'selection'
}
}]
- index页面添加
selectedData:any = [];
@Watch('selectedData')
onchange(val:any) {
console.log('--------', val);
}
8.form表单自定义校验规则
ruleCustom:any = {
name: { required: true, message: '必填' },
quantity: { required: true, message: '请输入正整数', type: 'integer' },
budgetTermStart: {
required: true,
validator: (rule:any, value:any, callback:any) => {
if (value === '') {
callback('必填');
} else if (new Date(value).getTime() > new Date(this.formCustom.budgetTermEnd).getTime()) {
callback(new Error('预算开始时间不能晚于预算结束时间'));
} else {
callback();
}
}
},
}
9.在子组件中使用抽屉，怎么控制抽屉的展示与收起不报错
- 父组件里写：
<Drawer
:visible.sync="isShowDraw"
/>
data () {
isShowDraw: false // 默认不展示
}
methods: {
handleShowDrawerFunc() {
this.isShowDraw = true; // 点击事件时传参展示
},
}
- 子组件里写：
<mtd-drawer
v-model="isShowDrawer"
@close="handleCloseFunc">
...
</mtd-drawer>
props: {
visible: null
},
data () {
isShowDraw: false // 默认不展示
}
watch: {
visible: {
deep: true,
handler(val) {
this.isShowDrawer = val; // 通过监听父组件传参来改变子组件的值，来控制是否展示
}
}
}
handleCloseFunc() {
this.$emit('update:visible', false); // 关闭的时候通过给父组件传参来改变状态
},
-
mtd上传组件，自定义上传只可以点击一次上传，再次点击不调接口，原因是改文件的状态已经变为success了，想要在点击依然可以上传需要改变状态:
需求为：上面这个点击确定之后要上传一遍去做一个校验，然后下面这个确定点击的时候还要上传一遍，但是我下面这个按钮点击调用上传的方法就不调接口了
image.png
// 在需要点击的地方加上
(this.$refs.upload as any).uploadFiles[0].status = 'ready';
-
列表项里的某一项需要一定格式的tooltip
image.png
<itu-table-column
label="操作详情">
<template #default="{ row }">
<mtd-tooltip
placement="top">
<div
slot="content"
v-html="`策略详情：<br />备用量由【${ !row.oldNumber ? '无' : row.oldNumber }】设置为【${ row.newNumber }】<br />策略状态由【${ !row.oldStatus ? '无' : row.oldStatus }】设置为【${ row.newStatus }】`" />
<div style="width: 100%; height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
策略详情：
备用量由【{{ !row.oldNumber ? '无' : row.oldNumber }}】设置为【{{ row.newNumber }}】
策略状态由【{{ !row.oldStatus ? '无' : row.oldStatus }}】设置为【{{ row.newStatus }}】
</div>
</div>
</mtd-tooltip>
</template>
</itu-table-column>
- message里要交可以跳转的链接
this.$mtd.message({
message: h('p', [
h('span', '资源转化成功，可前往'),
h('a', {
on: {
click: () => {
window.open('https://km.sankuai.com/page/1325767153');
}}},
'转化明细'),
h('span', '中查看'),
]),
type: 'success',
});
