vue:动态表格操作栏操作显示隐藏控制

文章目录

• • 动态数据格式
  • 子组件接收父组件传递过来的数据

整动态数据格式程

 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-table
        class="singleTableRef"
        ref="singleTableRef"
        :data="PropTableS.tables"
         border
         highlight-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-input
                      v-model="scope.row[key]"
                      @blur="HandelTextareaBlur(scope.row)"
                      size="small"
                      class="tab_input"
                      type="textarea"
                    />
                </template>

                <!-- 计数器 -->
                <template v-if="child.inputnumber" >
                  <el-input-number
                    v-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 = 0
        if(row.SetTime){
          clearInterval(row.SetTime)
        }
        throttleFunction(value,row,newTimeNumber)
     }
    function throttleFunction(value:number,row:number,newTimeNumber:number) {
        //在此之前传递数据的时候已经将每个对象中添加新的数据，用于每行数据可以存放自己创建的定时器， 点击三秒内没有进行操作就提交数据。否则重新读秒，多行同时使用不冲突
        row.SetTime =  setInterval(() => {
          ++newTimeNumber
          if(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>