中山网站建设的企业,电子商务系统的开发方式,莱芜网络小说作家,成都做公众号推广的公司Vue3Element Plus实现el-table跨行显示 app组件内容使用:span-methodobjectSpanMethod自定义方法实现跨行显示查询方法初始化挂载新建一个html即可进行测试#xff0c;完整代码如下效果图 app组件内容 div idapp!-- 远程搜索 --e… Vue3Element Plus实现el-table跨行显示 app组件内容使用:span-methodobjectSpanMethod自定义方法实现跨行显示查询方法初始化挂载新建一个html即可进行测试完整代码如下效果图 app组件内容 div idapp!-- 远程搜索 --el-form :inlinetrue :modelformInline classdemo-form-inlineel-form-item label任务名称 stylemargin-left:30px;el-select v-modelvalue filterable remote clearable reserve-keyword placeholderPlease enter a keyword :remote-methodremoteMethod :loadingloadingel-option v-foritem in options :keyitem.CODE :labelitem.NAME :valueitem.CODE //el-select/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item/el-form!-- 表格数据 --el-table :datatableData stripe border stylewidth: 98%; :span-methodobjectSpanMethod max-height650el-table-column fixed propCODE label编码 width60/el-table-columnel-table-column propNAME label名称/el-table-columnel-table-column propFREQUENCY label频次 width80/el-table-columnel-table-column propFNAME label执行科室 width150/el-table-columnel-table-column propFILENAME label文件名称/el-table-columnel-table-column propSTATUS label状态 width80/el-table-columnel-table-column propCREATEID label上传人 width80/el-table-columnel-table-column propCREATEDATE label上传时间/el-table-column/el-table/div使用:span-methodobjectSpanMethod自定义方法实现跨行显示
const objectSpanMethod ({row,column,rowIndex,columnIndex}) {const columnsToSpan [CODE, NAME, FNAME, FREQUENCY]; // 列名数组if (columnsToSpan.includes(column.property)) {if (rowIndex 0 || row[column.property] ! tableData.value[rowIndex - 1][column.property]) {// 如果是相同 NAME 的第一行则返回正确的 rowspan 和 colspanlet 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; // 隐藏后续行的 NAME} else {break;}}return {rowspan,colspan: 1};}return {rowspan: 0,colspan: 0}; // 隐藏相同 NAME 的后续行}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(发生错误, error);// return false;// });} else {showErrorMessage(请搜索并选择您要查询的细则编码或细则名称!);return false;}
初始化挂载 //初始化挂载onMounted(() {list.value states.map((item) {return {value: item};});onSubmit(true);});新建一个html即可进行测试完整代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue 3 回车键示例/title!-- 引入 Vue 3 和 Element Plus --!-- 包含 Vue 3 库 --script srchttps://cdn.jsdelivr.net/npm/vue3.3.4/dist/vue.global.min.js/script!-- 包含 Element Plus 的 CSS 样式 --link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/element-plus2.3.9/dist/index.min.css!-- 包含 Element Plus 的 JavaScript 文件 --script srchttps://cdn.jsdelivr.net/npm/element-plus2.3.9/dist/index.full.min.js/scriptscript srchttps://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/axios.min.js/script/headbodydiv idapp!-- 远程搜索 --el-form :inlinetrue :modelformInline classdemo-form-inlineel-form-item label任务名称 stylemargin-left:30px;el-select v-modelvalue filterable remote clearable reserve-keyword placeholderPlease enter a keyword :remote-methodremoteMethod :loadingloadingel-option v-foritem in options :keyitem.CODE :labelitem.NAME :valueitem.CODE //el-select/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item/el-form!-- 表格数据 --el-table :datatableData stripe border stylewidth: 98%; :span-methodobjectSpanMethod max-height650el-table-column fixed propCODE label编码 width60/el-table-columnel-table-column propNAME label名称/el-table-columnel-table-column propFREQUENCY label频次 width80/el-table-columnel-table-column propFNAME label执行科室 width150/el-table-columnel-table-column propFILENAME label文件名称/el-table-columnel-table-column propSTATUS label状态 width80/el-table-columnel-table-column propCREATEID label上传人 width80/el-table-columnel-table-column propCREATEDATE label上传时间/el-table-column/el-table/divscriptconst {createApp,reactive,ref,onMounted,onBeforeMount,onUpdated,ElMessage} Vue;const vue3DepartFileStatis {setup() {//定义响应数据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);// 发送 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(发生错误, 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(发生错误, error);// return false;// });} else {showErrorMessage(请搜索并选择您要查询的细则编码或细则名称!);return false;}//模拟数据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}]}//模拟数据const states [];const objectSpanMethod ({row,column,rowIndex,columnIndex}) {const columnsToSpan [CODE, NAME, FNAME, FREQUENCY]; // 列名数组if (columnsToSpan.includes(column.property)) {if (rowIndex 0 || row[column.property] ! tableData.value[rowIndex - 1][column.property]) {// 如果是相同 NAME 的第一行则返回正确的 rowspan 和 colspanlet 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; // 隐藏后续行的 NAME} else {break;}}return {rowspan,colspan: 1};}return {rowspan: 0,colspan: 0}; // 隐藏相同 NAME 的后续行}return {rowspan: 1,colspan: 1};}return {list,options,value,loading,remoteMethod,onSubmit,tableData,formInline,objectSpanMethod}}}createApp(vue3DepartFileStatis).use(ElementPlus).mount(#app); // 挂载应用到指定元素上/script/body/html效果图
