ElementUI组件样式修改- && el-input 校验只能输入数字 & 动态列编辑

-表格背景透明;去除下横线;去掉顶部header下边框;每行增加间距;奇偶行不同背景色显示;hover时样式;底部自带横线去除方法

<style scoped>
/*最外层透明*/
:deep(.el-table), :deep(.el-table__expanded-cell){
  background-color: transparent;
  color: #fff;
}
/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  /* 删除表头下横线 */
  border-bottom: 0px;
}
/** 去掉顶部header下边框 */
:deep(.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell) {
  border-bottom: transparent !important;
}
/* 偶数行 */
:deep(.el-table tr:nth-child(even)) {
  background: rgba(0,255,255,0.4);
  border-top-width: 7px !important;
}
/* 奇数行 */
:deep(.el-table tr:nth-child(odd)) {
  background: rgba(0,0,0,0.5);
  border-top-width: 7px !important;
}
/** 由于el-table不能设置margin,然后使用下边的方法实现行间距 */
:deep(.el-table__body) {
  -webkit-border-vertical-spacing:7px;/* 垂直间距，设置的是行间距 */
  //-webkit-border-horizontal-spacing: 13px;  // 水平间距
}

/* hover时样式 */
:deep(.el-table tbody tr:hover>td) {
  background-color: #367f7f78 !important
}
/** 删除table下边的白线 */
:deep(.el-table__inner-wrapper::before) {
  background-color: transparent !important;
}
</style>

------------------------------------------------------------------------

el-input 校验只能输入数字

<el-input v-model="form.xxx" placeholder="xxx" style="width: 270px"
      @input="form.xxx = formatNum($event)"
/>

const formatNum = (e) => {
    let value = e.replace(/[^\d]/g, ""); // 只能输入数字和.x`
    value = value.replace(/^0+(\d)/, "$1"); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
    value = value.replace(/(\d{3})\d*/, "$1"); // 最多保留5位整数
    return value;
  };

----------------------------------------------------------------------

动态列编辑

<template>
    <el-card>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd"
                >新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="multiple"
                @click="handleDelete"
                >删除</el-button>
            </el-col>
        </el-row>
        <el-form
        ref="formRef"
        :model="columns"
        label-width="120px"
        class="demo-dynamic"
        hide-required-asterisk="true"
        >
            <el-table ref="dragTable" :data="columns.list" row-key="columnId" :max-height="tableHeight" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="字段列名" prop="columnName" min-width="10%">
                    <template #default="scope">
                        <el-form-item
                            class="my"
                            :prop="'list.'+scope.$index+ '.columnName'"
                            label=" "
                            :rules="[
                                {
                                required: true,
                                message: '必填',
                                trigger: 'blur',
                            },
                            {   pattern: /^\w+$/,
                                message: '字段列名只能输入英语',
                                trigger: 'change', }
                            ]"
                        >
                            <el-input v-model="columns.list[scope.$index].columnName"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="字段描述" min-width="10%">
                    <template #default="scope">
                    <el-input v-model="scope.row.columnComment"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="Java类型" min-width="11%">
                    <template #default="scope">
                    <el-select v-model="scope.row.javaType">
                        <el-option label="Long" value="Long" />
                        <el-option label="String" value="String" />
                        <el-option label="Integer" value="Integer" />
                        <el-option label="Double" value="Double" />
                        <el-option label="BigDecimal" value="BigDecimal" />
                        <el-option label="Date" value="Date" />
                        <el-option label="Boolean" value="Boolean" />
                    </el-select>
                    </template>
                </el-table-column>

                <el-table-column label="是否编辑" min-width="5%">
                    <template #default="scope">
                    <el-checkbox true-label="1" false-label="0" v-model="scope.row.isRequired"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="显示类型" min-width="12%">
                    <template #default="scope">
                    <el-select v-model="scope.row.htmlType">
                        <el-option label="文本框" value="input" />
                        <!-- <el-option label="文本域" value="textarea" /> -->
                        <el-option label="下拉框" value="select" />
                        <el-option label="单选框" value="radio" />
                        <el-option label="复选框" value="checkbox" />

                        <!-- <el-option label="日期控件" value="datetime" />
                        <el-option label="图片上传" value="imageUpload" />
                        <el-option label="文件上传" value="fileUpload" />
                        <el-option label="富文本控件" value="editor" /> -->
                    </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="字典类型" min-width="12%">
                    <template #default="scope">
                    <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
                        <el-option
                        v-for="dict in dictOptions"
                        :key="dict.dictType"
                        :label="dict.dictName"
                        :value="dict.dictType">
                        <span style="float: left">{{ dict.dictName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
                    </el-option>
                    </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="正则" min-width="10%">
                    <template #default="scope">
                    <el-input v-model="scope.row.regExp"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="排序" min-width="10%">
                    <template #default="scope">
                        <el-input v-model="scope.row.orderNum"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="10%">
                    <template #default="scope">
                        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: center;margin-left:-100px;margin-top:10px;">
            <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
            <el-button @click="close()">返回</el-button>
            </div>
        </el-form>
    </el-card>
  </template>
  
  <script setup name="columnEdit">

  const route = useRoute();
  const router = useRouter();
  const { proxy } = getCurrentInstance();
  
  const tableHeight = ref(document.documentElement.scrollHeight - 0 + "px");
  const columns = reactive({
      list: []
  });
  const dictOptions = ref([]);
  const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const formRef = ref()

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
  // 新增
  function handleAdd () {
    let isValid = true;
    columns.list.map(item=>{
        let isEmpty = Object.values(item).every(val=>!val)
        if(isEmpty) isValid = false;
    })
    if(!isValid) {
        proxy.$modal.msgError("表单校验未通过，请重新检查提交内容");
        return
    }
    let arr = {}
    columns.list.push(arr)

  }

  /** 删除按钮操作 */
function handleDelete(index, id) {
    columns.list.splice(index, 1)
  const _ids = id || ids.value;
  proxy.$modal.confirm('是否确认删除检查模板属性列编号为"' + _ids + '"的数据项？').then(function() {
    return delColumn(_ids);
  }).then(() => {
    getAllList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

function getAllList () {
    const templateId = route.params && route.params.tableId;
    if (templateId) {
        // 获取表详细信息
        let params = {
            templateId
        }
        columns.list = []
        allListColumn(params).then(res => {
            columns.list = res;
        }).catch((e) => {
            let arr = {}
            columns.list.push(arr)
        })
    }
}
  
  /** 提交按钮 */
  function submitForm(formRef) {
      console.log(columns.list)
    let isValid = true;
    columns.list.map(item=>{
        let isEmpty = Object.values(item).every(val=>!val)
        if(isEmpty) isValid = false;
    })
    if(!isValid) {
        proxy.$modal.msgError("表单校验未通过，请重新检查提交内容");
        return
    }
    formRef.validate((valid)=>{
        if(valid){
            const templateId = route.params && route.params.tableId;
            
            columns.list.forEach((item) => {
                item.templateId = templateId
            })
            columnAddOrEdit(columns.list).then(res => {
                proxy.$modal.msgSuccess(res.msg);
                if (res.code === 200) {
                close();
                }
            });
        }
    })
     
  }

  function close() {
  }
  
  (() => {
    const templateId = route.params && route.params.tableId;
    if (templateId) {
      // 获取表详细信息
      let params = {
          templateId
      }
      columns.list = []
      allListColumn(params).then(res => {
          if (res.length === 0) {
            columns.list = []
          } else {
            columns.list = res;
          }
      }).catch((e) => {
          
      })
     
      getDictOptionselect().then(response => {
        dictOptions.value = response.data;
      });
    }
  })();
3</script>
<style lang="scss" scoped>

::v-deep .el-form-item__label {
    width: 10px !important;
}
</style>