在mian.js中修改Element Plus的表单label的宽度
时间: 2024-02-17 22:03:34 浏览: 70
改变el-table宽度
5星 · 资源好评率100%
要修改 Element Plus 表单的 label 宽度,可以使用 CSS 样式来调整。具体可以在 `main.js` 文件中创建全局 CSS 样式,然后在应用程序中使用。
以下是一个示例,将 Element Plus 表单的 label 宽度设置为 100px:
```js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'
const app = createApp(App)
// 创建全局 CSS 样式
app.config.globalProperties.$style = document.createElement('style')
document.head.appendChild(app.config.globalProperties.$style)
// 设置表单 label 的宽度
app.config.globalProperties.$style.sheet.insertRule(`
.el-form-item__label {
width: 100px;
}
`)
app.use(ElementPlus)
app.mount('#app')
```
在以上示例中,我们通过创建全局 CSS 样式来设置表单 label 的宽度,然后在样式中使用 CSS 选择器 `.el-form-item__label` 来选中表单 label 元素,并将宽度设置为 100px。你可以根据需要更改 label 的宽度或使用其他 CSS 样式来修改表单样式。
阅读全文