【Vue3】 el-table隐藏输入框；input输入内容居中；去掉el-input-number的上下箭头

原本：

更改后：

关键代码：

el-table 设置 class="search_table"

el-input 设置 class="no_number" (type为number的input)

el-date-picker 设置 class="date_picker"

剩下的就是样式设置

完整代码代码如下：

<template>    
    <el-table
        :data="tableData"
        border
        class="search_table"
        size="small">

      <el-table-column
          v-for="item in titleList"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
          align="center">
        <template #default="scope">
          <el-input v-model="scope.row[item.prop]"  v-if="item.type === 'text'"/>
          <el-input v-model="scope.row[item.prop]"  v-if="item.type === 'number'" type = "number" class="no_number"/>
          <el-date-picker
              v-model="scope.row[item.prop]"
              type="date"
              size="small"
              style="width: 100%"
              class="date_picker"
              v-if="item.type === 'date'"/>
        </template>
      </el-table-column>
    </el-table>
</template>    

<script setup>
const titleList = ref([
  { label: "可用数量", prop: "sampleAvailableNumber",type:'number',width:"" },
  { label: "客户项目", prop: "project" ,type:'text',width:""},
  { label: "申请数量", prop: "expectNumber" ,type:'number',width:""},
  { label: "单机用量", prop: "unitNumber",type:'number',width:"" },
  { label: "销售单价", prop: "salePrice",type:'number',width:"" },
  { label: "需求日期", prop: "expectDate" ,type:'date',width:"100"},
  { label: "客户料号", prop: "custMaterialId" ,type:'text',width:""},
  { label: "收货地址", prop: "deliveryAddress" ,type:'text',width:""},
  { label: "备注", prop: "remarks",type:'text' ,width:""},
]);
</script>

<style lang="scss" scoped>
// 去掉日期前的icon
::v-deep(.date_picker .el-input__prefix){
  display: none;
}

//输入框内容居中
:deep(.search_table .el-input__inner){
  text-align: center;
}

//去掉number输入框的上下箭头
:deep(.no_number input::-webkit-inner-spin-button),
:deep(.no_number input::-webkit-outer-spin-button){
  -webkit-appearance: none !important;
}
:deep(.no_number input[type="number"]){
  -moz-appearance: textfield;
}

// 去掉输入框边框
:deep(.search_table.el-table--small .el-table__cell){
  padding: 0 !important;
}
:deep(.search_table.el-table--small .cell){
  padding: 0 !important;
}
:deep(.search_table .el-input__wrapper){
  padding: 1px 3px !important;
  background-color: transparent !important;
  border-radius: 0;
  box-shadow: 0 0 0 0 !important;
}
</style>