element中的组件使用

约定不等于承诺〃 2023-06-15 11:06 10阅读 0赞

由于最近公司后台个别页面重新做，因为之前是php写的不是前后端分离，重新做的页面引用element。

在后台管理中使用最多的就是form表单和table表格（大部分都是添加和展示数据）

# 1.form表单element #

### (1)template中的代码 ###

<el-form size="small" :model="ruleForm" :rules="rules" ref="ruleForm" :inline-message="true" label-width="120px"   class="ruleForm">
          <el-form-item label="产品价格" >
            <el-form-item prop="Products_PriceY" style="display: inline-block;margin-bottom: 0px" >
              <el-tooltip class="item" effect="light" :content="textTitle" placement="top-start" :disabled="!noEditField.Products_PriceY">
                <el-input v-model="ruleForm.Products_PriceY"  :disabled="noEditField.Products_PriceY"  placeholder="原价:¥" class="sortInput"></el-input>
              </el-tooltip>
            </el-form-item>
            <el-form-item  prop="Products_PriceX" style="display: inline-block;margin-bottom: 0px">
              <el-tooltip class="item" effect="light" :content="textTitle" placement="top-start" :disabled="!noEditField.Products_PriceX">
                <el-input v-model="ruleForm.Products_PriceX"  :disabled="noEditField.Products_PriceX"  placeholder="现价:¥" class="sortInput" style="margin-left: 18px"></el-input>
              </el-tooltip>
            </el-form-item>
          </el-form-item>
    </el-form>

最外层的el-form 的size   label-width 这些就无需多谈。model属性绑定的是表单子元素中双向绑定的值，而rules中是表单验证的值

### (2)ts代码 ###

form表单分为默认不为空的表单验证和自定义表单验证

# 2.table表格element #

<el-table
                        :data="scenesList"
                        style="width: 100%">
                        <el-table-column
                            prop="name"
                            label="活动名称"
                            width="239">
                        </el-table-column>
                        <el-table-column
                            prop="type_txt"
                            label="活动类型"
                            width="187">
                        </el-table-column>
                        <el-table-column
                            prop="act_time"
                            label="活动时间"
                            width="300">
                        </el-table-column>
                        <el-table-column
                            prop="rights"
                            label="会员范围"
                            width="191">
                        </el-table-column>
                        <el-table-column
                            prop="status_txt"
                            label="状态"
                            width="145">
                        </el-table-column>
                        <el-table-column
                            prop="handle"
                            label="操作"
                            width="254">
                             <template slot-scope="scope">
                                <el-button @click="handleClick(scope.$index)" type="text" size="small">详情</el-button>
                                <el-button type="text" size="small" v-if="scenesList[scope.$index].status==0" @click="editScenes(scenesList[scope.$index].id,scenesList[scope.$index].type)">编辑</el-button>
    
                                <el-button type="text" size="small" v-if="scenesList[scope.$index].status<2" @click="stopScenes(scenesList[scope.$index].id)">终止</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

最主要的就是scope.$index这个是每行下标 从0开始

el-table :data="scenesList"  是要展示的数据  每列的prop是展示的数据中的字段，如果展示的字段不是数据中的字段，可以通过scope.$index来控制下标循环

要控制表格的class样式 可以通过   /deep/ 来控制