<span class="label">本日资金收入(万)</span> </el-row> <el-row> <span class="content">27854.72</span> </el-row> 用vue添加样式改变两行间的距离
时间: 2023-11-16 18:59:39 浏览: 33
您可以在Vue中使用class或style属性来添加样式。为了改变两行间的距离,您可以添加一个自定义的class并在其中设置margin或padding属性。例如:
```
<el-row class="my-row">
<span class="label">本日资金收入(万)</span>
</el-row>
<el-row class="my-row">
<span class="content">27854.72</span>
</el-row>
<style>
.my-row {
margin-bottom: 10px;
}
</style>
```
这将在两行之间添加10像素的底部边距。
相关问题
<el-form-item :label-width="formLabelWidth"> <div v-for="shelfLayerNum in shelfLayerNumList" :key="shelfLayerNum" class="box"> <el-row> <el-col :span="12"> <p v-if="formInsert.codeRule==1">右侧-第{{ shelfLayerNum.index }}节</p> <p v-if="formInsert.codeRule==2">左侧-第{{ shelfLayerNum.index }}节</p> </el-col> <el-col :span="2"> <p>层数:</p> </el-col> <el-col :span="10"> <el-input-number v-model="shelfLayerNum.value" :min="1" :max="10" @change="handleChange" /> </el-col> </el-row> </div> </el-form-item> </el-form> 这段代码出现Avoid using non-primitive value as key, use string/number value instead. 怎么解决
这个警告的原因是在使用 Vue 的 v-for 指令时,使用了一个非基本类型的值作为 key,而这可能会导致性能问题和不稳定的行为。为了解决这个问题,你可以将 key 值改为一个字符串或者数字。例如,你可以将代码改写为:
```
<el-form-item :label-width="formLabelWidth">
<div v-for="(shelfLayerNum, index) in shelfLayerNumList" :key="index" class="box">
<el-row>
<el-col :span="12">
<p v-if="formInsert.codeRule==1">右侧-第{{ shelfLayerNum.index }}节</p>
<p v-if="formInsert.codeRule==2">左侧-第{{ shelfLayerNum.index }}节</p>
</el-col>
<el-col :span="2">
<p>层数:</p>
</el-col>
<el-col :span="10">
<el-input-number v-model="shelfLayerNum.value" :min="1" :max="10" @change="handleChange" />
</el-col>
</el-row>
</div>
</el-form-item>
```
在这个例子中,我们将 key 值改为了索引值 `index`,这是一个基本类型的值,能够避免出现上述警告。
<template> <div class="addEdit-block"> <el-form class="detail-form-content" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" :style="{backgroundColor:addEditForm.addEditBoxColor}" > <el-row> <el-col :span="12"> <el-form-item class="input" v-if="type!='info'" label="账号" prop="zhanghao"> <el-input v-model="ruleForm.zhanghao" placeholder="账号" clearable :readonly="ro.zhanghao"></el-input> </el-form-item> <div v-else> <el-form-item class="input" label="账号" prop="zhanghao"> <el-input v-model="ruleForm.zhanghao" placeholder="账号" readonly></el-input> </el-form-item> </div>
这是一个Vue.js的模板代码,用于渲染一个包含表单元素的组件。其中使用了element-ui这个UI组件库来渲染表单元素。代码解析如下:
```html
<template>
<div class="addEdit-block">
<!-- el-form是element-ui中的表单组件 -->
<el-form
class="detail-form-content"
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="80px"
:style="{backgroundColor:addEditForm.addEditBoxColor}"
>
<el-row>
<el-col :span="12">
<!-- el-form-item是element-ui中的表单项组件,用于包裹表单元素 -->
<el-form-item class="input" v-if="type!='info'" label="账号" prop="zhanghao">
<!-- el-input是element-ui中的输入框组件 -->
<el-input
v-model="ruleForm.zhanghao"
placeholder="账号"
clearable
:readonly="ro.zhanghao"
></el-input>
</el-form-item>
<div v-else>
<el-form-item class="input" label="账号" prop="zhanghao">
<el-input
v-model="ruleForm.zhanghao"
placeholder="账号"
readonly
></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<!-- 其他表单项省略... -->
</el-form>
</div>
</template>
```
这段代码定义了一个名为addEdit-block的组件,包含了一个el-form表单元素,其中包含了一个el-input输入框组件和一个el-form-item表单项组件。组件中的所有数据和事件都由Vue实例管理。