Vue3+Element?Plus實現(xiàn)el-table跨行顯示(非腳手架)
更新時間：2023年09月11日 11:08:47 作者：凌霄玉階非所愿
這篇文章主要介紹了Vue3+Element Plus實現(xiàn)el-table跨行顯示(非腳手架),本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
app組件內容
<div id="app">
<!-- 遠程搜索 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="任務名稱：" style="margin-left:30px;">
<el-select v-model="value" filterable remote clearable reserve-keyword placeholder="Please enter a keyword" :remote-method="remoteMethod" :loading="loading">
<el-option v-for="item in options" :key="item.CODE" :label="item.NAME" :value="item.CODE" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查詢</el-button>
</el-form-item>
</el-form>
<!-- 表格數(shù)據(jù) -->
<el-table :data="tableData" stripe border style="width: 98%;" :span-method="objectSpanMethod" max-height="650">
<el-table-column fixed prop="CODE" label="編碼" width="60"></el-table-column>
<el-table-column prop="NAME" label="名稱"></el-table-column>
<el-table-column prop="FREQUENCY" label="頻次" width="80"></el-table-column>
<el-table-column prop="FNAME" label="執(zhí)行科室" width="150"></el-table-column>
<el-table-column prop="FILENAME" label="文件名稱"></el-table-column>
<el-table-column prop="STATUS" label="狀態(tài)" width="80"></el-table-column>
<el-table-column prop="CREATEID" label="上傳人" width="80"></el-table-column>
<el-table-column prop="CREATEDATE" label="上傳時間"></el-table-column>
</el-table>
</div>使用:span-method="objectSpanMethod"自定義方法實現(xiàn)跨行顯示
const objectSpanMethod = ({
row,
column,
rowIndex,
columnIndex
}) => {
const columnsToSpan = ['CODE', 'NAME', 'FNAME', 'FREQUENCY']; // 列名數(shù)組
if (columnsToSpan.includes(column.property)) {
if (rowIndex === 0 || row[column.property] !== tableData.value[rowIndex - 1][column.property]) {
// 如果是相同 "NAME" 的第一行，則返回正確的 rowspan 和 colspan
let rowspan = 1;
for (let i = rowIndex + 1; i < tableData.value.length; i++) {
if (tableData.value[i][column.property] === row[column.property]) {
rowspan++;
tableData.value[i]._rowspan = 0; // 隱藏后續(xù)行的 "NAME"
} else {
break;
}
}
return {
rowspan,
colspan: 1
};
}
return {
rowspan: 0,
colspan: 0
}; // 隱藏相同 "NAME" 的后續(xù)行
}
return {
rowspan: 1,
colspan: 1
};
}查詢方法
const onSubmit = (boolen) => {
// 在這里獲取輸入的值
const inputValue = value.value;
if ((inputValue !== null && inputValue !== undefined && inputValue !== '') || boolen) {
// console.log("Input Value:", inputValue);
// axios.get(UJCAjaxBaseUrl + "/請求地址", {
// params: {
// TaskId: inputValue
// }
// }).then((response) => {
// console.log("response:" + response.data.data);
// tableData.value = response.data.data;
// return true;
// }).catch((error) => {
// console.error('發(fā)生錯誤：', error);
// return false;
// });
} else {
showErrorMessage('請搜索并選擇您要查詢的細則編碼或細則名稱!');
return false;
}初始化掛載
//初始化掛載
onMounted(() => {
list.value = states.map((item) => {
return {
value: item
};
});
onSubmit(true);
});新建一個html即可進行測試，完整代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 回車鍵示例</title>
<!-- 引入 Vue 3 和 Element Plus -->
<!-- 包含 Vue 3 庫 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
<!-- 包含 Element Plus 的 CSS 樣式 -->
<link rel="stylesheet" >
<!-- 包含 Element Plus 的 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.9/dist/index.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/axios.min.js"></script>
</head>
<body>
<div id="app">
<!-- 遠程搜索 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="任務名稱：" style="margin-left:30px;">
<el-select v-model="value" filterable remote clearable reserve-keyword placeholder="Please enter a keyword" :remote-method="remoteMethod" :loading="loading">
<el-option v-for="item in options" :key="item.CODE" :label="item.NAME" :value="item.CODE" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查詢</el-button>
</el-form-item>
</el-form>
<!-- 表格數(shù)據(jù) -->
<el-table :data="tableData" stripe border style="width: 98%;" :span-method="objectSpanMethod" max-height="650">
<el-table-column fixed prop="CODE" label="編碼" width="60"></el-table-column>
<el-table-column prop="NAME" label="名稱"></el-table-column>
<el-table-column prop="FREQUENCY" label="頻次" width="80"></el-table-column>
<el-table-column prop="FNAME" label="執(zhí)行科室" width="150"></el-table-column>
<el-table-column prop="FILENAME" label="文件名稱"></el-table-column>
<el-table-column prop="STATUS" label="狀態(tài)" width="80"></el-table-column>
<el-table-column prop="CREATEID" label="上傳人" width="80"></el-table-column>
<el-table-column prop="CREATEDATE" label="上傳時間"></el-table-column>
</el-table>
</div>
<script>
const {
createApp,
reactive,
ref,
onMounted,
onBeforeMount,
onUpdated,
ElMessage
} = Vue;
const vue3DepartFileStatis = {
setup() {
//定義響應數(shù)據(jù)
const list = ref([]);
const options = ref([]);
const value = ref([]);
const loading = ref(false);
const tableData = ref([]); //表格響應式
let formInline = reactive({
keyword: ""
});
const isMessageShowing = ref(false);
//初始化掛載
onMounted(() => {
list.value = states.map((item) => {
return {
value: item
};
});
onSubmit(true);
});
//遠程搜索
const remoteMethod = (query) => {
//if (query) {
// loading.value = true;
// setTimeout(() => {
// loading.value = false;
// options.value = list.value.filter((item) => {
// return item.value.toLowerCase().includes(query.toLowerCase())
// });
// }, 200);
//} else {
// options.value = [];
//}
if (query) {
loading.value = true;
console.log(query);
// 發(fā)送 Axios 請求
axios.get(UJCAjaxBaseUrl + "/請求地址", {
params: {
TaskName: query
}
}).then((response) => {
loading.value = false;
options.value = response.data.data;
console.log(response.data.data);
}).catch((error) => {
console.error('發(fā)生錯誤：', error);
loading.value = false;
});
} else {
options.value = [];
}
}
//封裝錯誤提示
const showErrorMessage = (message = 'Oops, this is a error message.') => {
if (!isMessageShowing.value) {
isMessageShowing.value = true;
ElementPlus.ElMessage({
showClose: true,
message: message,
type: 'error',
onClose: () => {
isMessageShowing.value = false;
},
});
}
};
//查詢
const onSubmit = (boolen) => {
// 在這里獲取輸入的值
const inputValue = value.value;
if ((inputValue !== null && inputValue !== undefined && inputValue !== '') || boolen) {
// console.log("Input Value:", inputValue);
// axios.get(UJCAjaxBaseUrl + "/請求地址", {
// params: {
// TaskId: inputValue
// }
// }).then((response) => {
// console.log("response:" + response.data.data);
// tableData.value = response.data.data;
// return true;
// }).catch((error) => {
// console.error('發(fā)生錯誤：', error);
// return false;
// });
} else {
showErrorMessage('請搜索并選擇您要查詢的細則編碼或細則名稱!');
return false;
}
//模擬數(shù)據(jù)
tableData.value = [{
CODE: '001',
NAME: 'Item A',
FREQUENCY: 'Daily',
FNAME: 'Department A',
FILENAME: 'File A',
STATUS: 'Active',
CREATEID: 'User 1',
CREATEDATE: '2023-09-06'
}, {
CODE: '002',
NAME: 'Item A',
FREQUENCY: 'Weekly',
FNAME: 'Department B',
FILENAME: 'File B',
STATUS: 'Inactive',
CREATEID: 'User 2',
CREATEDATE: '2023-09-07'
}, {
CODE: '003',
NAME: 'Item B',
FREQUENCY: 'Monthly',
FNAME: 'Department C',
FILENAME: 'File C',
STATUS: 'Active',
CREATEID: 'User 3',
CREATEDATE: '2023-09-08'
}, {
CODE: '004',
NAME: 'Item B',
FREQUENCY: 'Daily',
FNAME: 'Department A',
FILENAME: 'File D',
STATUS: 'Inactive',
CREATEID: 'User 4',
CREATEDATE: '2023-09-09'
}]
}
//模擬數(shù)據(jù)
const states = [];
const objectSpanMethod = ({
row,
column,
rowIndex,
columnIndex
}) => {
const columnsToSpan = ['CODE', 'NAME', 'FNAME', 'FREQUENCY']; // 列名數(shù)組
if (columnsToSpan.includes(column.property)) {
if (rowIndex === 0 || row[column.property] !== tableData.value[rowIndex - 1][column.property]) {
// 如果是相同 "NAME" 的第一行，則返回正確的 rowspan 和 colspan
let rowspan = 1;
for (let i = rowIndex + 1; i < tableData.value.length; i++) {
if (tableData.value[i][column.property] === row[column.property]) {
rowspan++;
tableData.value[i]._rowspan = 0; // 隱藏后續(xù)行的 "NAME"
} else {
break;
}
}
return {
rowspan,
colspan: 1
};
}
return {
rowspan: 0,
colspan: 0
}; // 隱藏相同 "NAME" 的后續(xù)行
}
return {
rowspan: 1,
colspan: 1
};
}
return {
list,
options,
value,
loading,
remoteMethod,
onSubmit,
tableData,
formInline,
objectSpanMethod
}
}
}
createApp(vue3DepartFileStatis)
.use(ElementPlus).mount("#app"); // 掛載應用到指定元素上
</script>
</body>
</html>效果圖
到此這篇關于Vue3+Element Plus實現(xiàn)el-table跨行顯示（非腳手架）的文章就介紹到這了,更多相關Vue3+Element Plus el-table跨行顯示內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue?使用el-table循環(huán)生成表格的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了解決vue3項目中el-menu不兼容SSR問題,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue-cli設置css不生效的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
使用Vue.js和MJML創(chuàng)建響應式電子郵件
這篇文章主要介紹了使用Vue.js和MJML創(chuàng)建響應式電子郵件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
DeepSeek?助力?Vue?開發(fā)絲滑的步驟條效果(過程詳解)
本文詳細介紹了如何使用Vue.js和ElementUI創(chuàng)建一個進度條組件,并將所有代碼保存在一個文件夾中,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2025-02-02
解決Vite無法分析出動態(tài)import的類型,控制臺出警告的問題
這篇文章主要介紹了解決Vite無法分析出動態(tài)import的類型,控制臺出警告的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
深入淺出 Vue 系列 -- 數(shù)據(jù)劫持實現(xiàn)原理
深入淺出 Vue 系列 -- 數(shù)據(jù)劫持實現(xiàn)原理2019-04-04
vue3+element?Plus使用el-tabs標簽頁解決頁面刷新不回到默認頁的問題
這篇文章主要介紹了vue3+element?Plus使用el-tabs標簽頁頁面刷新不回到默認頁的操作方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡易的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue常見的事件修飾符,在平時無論是面試還是學習工作中都會經常遇到的,本文就帶你快速上手,需要的朋友可以參考下2023-03-03