1.表格合并單元格后，發(fā)現(xiàn)行高異常，比普通行高要高很多
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.表頭加插槽，并且獲取當前列的數(shù)據(jù)
image.png
6.輸入框通過點擊下拉框選項來賦值時，校驗規(guī)則顯示為空，這時是因為，點擊下拉框賦值的時候沒有觸發(fā)校驗，可以在點擊下拉框時的方法中，加入clearValidate方法
handleChoiseTipsFunc(name:any) {
this.formCustom.name = name;
if (name) {
(this.$refs.formCustom as any).clearValidate('name');
}
}
7.表格多選后怎么獲取選擇的列表數(shù)據(jù)
- tableCfg里添加
tableAttrs: {
// selectedData頁面自定義一個數(shù)組
selection: selectedData
},
col: [
{
attrs: {
type: 'selection'
}
}]
- index頁面添加
selectedData:any = [];
@Watch('selectedData')
onchange(val:any) {
console.log('--------', val);
}
8.form表單自定義校驗規(guī)則
ruleCustom:any = {
name: { required: true, message: '必填' },
quantity: { required: true, message: '請輸入正整數(shù)', 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; // 通過監(jiān)聽父組件傳參來改變子組件的值，來控制是否展示
}
}
}
handleCloseFunc() {
this.$emit('update:visible', false); // 關閉的時候通過給父組件傳參來改變狀態(tài)
},
-
mtd上傳組件，自定義上傳只可以點擊一次上傳，再次點擊不調接口，原因是改文件的狀態(tài)已經變?yōu)閟uccess了，想要在點擊依然可以上傳需要改變狀態(tài):
需求為：上面這個點擊確定之后要上傳一遍去做一個校驗，然后下面這個確定點擊的時候還要上傳一遍，但是我下面這個按鈕點擊調用上傳的方法就不調接口了
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 />策略狀態(tài)由【${ !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 }}】
策略狀態(tài)由【{{ !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',
});
