element中的组件使用

由于最近公司后台个别页面重新做，因为之前是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代码 

<script lang="ts">
import {
        Component,
        Vue,
        Watch
    } from 'vue-property-decorator';
export default class AddProduct extends Vue {
 
    //自定义验证
 validateFn = {
            pass:(rule, value, callback) => {
 
                if (value === '') {
                    callback(new Error('请输入现价'));
                } else {
                    if (Number(value) >= Number(this.ruleForm.Products_PriceY)) {
                        callback(new Error('现价应低于原价'));
                    }
                    callback();
                }
            }
        }
 
 
 
 
        //双向绑定的内容
        ruleForm =  {
            Products_PriceY:'',//原价
            Products_PriceX:'',//现价
        }
        //el-form-item 中prop绑定的验证
        rules = {
            Products_PriceY:[
                { required: true, message: '请输入原价',trigger: 'blur' }
            ],
            Products_PriceX:[
                { validator:this.validateFn.pass, trigger: 'blur' }
            ]
        }
 
        
        //提交按钮
        submitForm(formName) {
            //form表单验证 只有绑定prop的才会验证提示
            this.$refs[formName].validate((valid) => {
                if (valid) {
                        //验证成功之后的
                }
 
            })
        }
}
 
 
 
</script>

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">删除</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>
————————————————
版权声明：本文为CSDN博主「木贝西」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44872995/article/details/103194236

 最主要的就是scope.$index这个是每行下标 从0开始 el-table :data="scenesList" 是要展示的数据 每列的prop是展示的数据中的字段，如果展示的字段不是数据中的字段，可以通过scope.$index来控制下标循环 要控制表格的class样式 可以通过 /deep/ 来控制