整动态数据格式程

 1.调用表格组件的父组件

<template>
<Table  :PropTableS="PropTableS"  ></Table>
</template>let PropTableS = ref({keyS:{selection:{type:'selection',width:50,},order_sn:{title:'退货通知单号',width:'200px',link:true},order_status_text:{title:'状态',},push_e3_text:{title:'已推送E3',select:true},is_succeed_text:{title:'推送E3状态',},has_sale_order_text:{title:'已生成退单',},customer_abbreviate:{title:'客户简称',},nc_code:{title:'NC代码',},order_amount:{title:'金额',},sku_count:{title:'数量',inputnumber:true,step:2,//每次点击加减数值precision:2,//精确到小数点后几位},return_shipping_name:{title:'退货快递公司',},logistics_number:{title:'退货物流单号',},warehouse_name:{title:'仓库',},business_type_text:{title:'业务类型',},user_text:{title:'业务',},creator_text:{title:'制单人',},remarks:{title:'备注',textarea:true,},business_time:{title:'业务时间',width:'200px'},created_at:{title:'创建时间',width:'200px'}, operate:[{title:"查看",isshow:true,type:'primary'},{title:"编辑",isshow: `row.push_e3 != 0`,type:'primary'},{title:"删除",isshow: `row.push_e3 == 1`,type:'danger'},{title:"确认",isshow: `row.order_status == 0`,type:'primary'},],}
})

子组件接收父组件传递的数据

<template><div class="TableBox"><el-tableclass="singleTableRef"ref="singleTableRef":data="PropTableS.tables"borderhighlight-current-row@selection-change="handleSelectionChange"row-key="id":header-cell-style="{background:'#f0f2f7'}":scrollbar-always-on="true":default-sort="{ prop: 'date', order: 'descending' }"max-height="644"> <template v-for="(child,key) in PropTableS.keyS" ><el-table-column v-slot="scope"  v-if="key != 'operate' "  :prop="key" :type="child.type" :label="child.title" :sortable="child.sortable"  :width="child.width" :show-overflow-tooltip="child.show_overflow_tooltip" >//根据父组件传递的数据类型判断是需要展示什么组件<!-- 点击跳转 --><template  v-if="child.link" ><el-link  type="primary"  @click="Selectuser(scope.row)">{{scope.row.order_sn}}</el-link></template><!-- 输入框  --><template v-if="child.textarea"  ><el-inputv-model="scope.row[key]"@blur="HandelTextareaBlur(scope.row)"size="small"class="tab_input"type="textarea"/></template><!-- 计数器 --><template v-if="child.inputnumber" ><el-input-numberv-model="scope.row[key]"@change="(currentValue,oldValue)=>{handelInputNumber(currentValue,oldValue,scope.row)}":min="0":precision="child.precision":step="child.step":max="100000000"size="small"controls-position="right"/></template><!-- 下拉 --><template v-if="child.select"><el-select@change="handelSelect"v-model="scope.row[key]"size="small"><el-option key="1" label="是" value="1" /><el-option key="2" label="否" value="2" /></el-select></template></el-table-column>//这是表格右侧操作栏部分<el-table-column v-slot="scope" v-else label="操作" fixed="right" class="TableRigth"  width="200"><template  v-for="(item,index) in child"><!-- v-if 因为传递过来的数据是 字符串格式，无法解析，使用方法将字符串转化为可执行的代码 --><el-link  v-if="evalExpression(scope.row,item.isshow)"  :underline="false" :type="item.type"  @click="handelOperateType(item.title)">{{item.title}}</el-link></template></el-table-column></template> </el-table></div>
</template>
<script setup lang="ts">import {defineProps,onMounted,ref,watch} from 'vue'import useCurrentInstance from "@/hooks/useCurrentInstance";const { proxy } = useCurrentInstance();const props = defineProps({PropTableS:{type:Object,}})const currentValue = ref(null)const time = ref(null)onMounted(()=>{let TabDom = document.querySelector('.singleTableRef')for (const item in props.PropTableS.tableStyle) {TabDom.style[item] = props.PropTableS.tableStyle[item]}})const singleTableRef = ref<InstanceType<typeof ElTable>>()function header_Cell_Style() {return 'backgourn:red;'}function handleSelectionChange(params:type) {}//链接点击function Selectuser(params:type) {proxy.$router.push(`/usercreate`) } //Textarea鼠标失去焦点function HandelTextareaBlur(row:string) {console.log('输入框失去焦点',row); }//计数器值改变function handelInputNumber(currentValue:number,oldValue:number,row:object) {callthrottle(currentValue,row)}function callthrottle(value:number,row:number) {let newTimeNumber = 0if(row.SetTime){clearInterval(row.SetTime)}throttleFunction(value,row,newTimeNumber)}function throttleFunction(value:number,row:number,newTimeNumber:number) {//在此之前传递数据的时候已经将每个对象中添加新的数据，用于每行数据可以存放自己创建的定时器， 点击三秒内没有进行操作就提交数据。否则重新读秒，多行同时使用不冲突row.SetTime =  setInterval(() => {++newTimeNumberif(newTimeNumber == 3){AxiosFunction('customer/edit',{username:'zhou1',password:'123456'})clearInterval(row.SetTime)}}, 1000);}//下拉选择function handelSelect(val:number) {console.log('下拉选择',val);AxiosFunction('customer/edit',{username:'zhou1',password:'123456'})}//请求方法function AxiosFunction(methods:string,url:string,params:object){proxy.$axios.post(url,params).then(res=>{console.log('请求');})}//点击操作function handelOperateType(title:string){console.log('title',title);}//解析操作栏的字符串 因为我传递过来的字符串是 scope就是获取表格中当行的数据，然后进行判断function evalExpression(row:object,params:string) {<!--  可将传递过来的字符串转换为可执行的代码  retrun 返回true 或者 false-->return eval(params)}</script><style scoped lang="less">.TableBox{width: 100%;padding: 0 0 20px 0 ;background: white;}::v-deep .el-table__inner-wrapper{overflow: hidden;overflow-y: auto;}::v-deep  .el-table__header .el-table__cell .cell{border-left: 2px solid #737c8b;}::v-deep  .el-table__header .el-table__cell:nth-child(1) .cell{border-left:none;}::v-deep  .el-table__header .el-table__cell:nth-child(2) .cell{border-left:none;}::v-deep  .el-table__header .el-table__cell:last-child .cell{border-left:none;}::v-deep .el-table__cell{border: none;font-size: var(--Click_Menu_FontSize);color: #1B2432;font-weight: 400;}::v-deep .el-table-fixed-column--right .cell{display: flex;justify-content: space-around;}</style>