vue+element常见细节总结

小咪咪 2023-08-17 15:56 89阅读 0赞

#### 修改表格某一列单元格的样式–方式1 ####

<el-table :data="tableData" height="360" highlight-current-row @row-click="handleRowClick" :cell-style="cellStyle">
    	<el-table-column prop="name" label="农户名称"></el-table-column>
        <el-table-column prop="shop" label="所属中心店"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
    </el-table>

// 设置单元格样式
    cellStyle({row, column, rowIndex, columnIndex}){  
        if(columnIndex === 1){//指定列号  
            return 'underline'  
        }else{  
            return ''  
        }  
    }

#### 修改表格某一列单元格的样式–方式2 ####

<el-table :data="tableData" height="360" highlight-current-row @row-click="handleRowClick" :cell-class-name="cellStyle">
        <el-table-column prop="name" label="农户名称"></el-table-column>
        <el-table-column prop="shop" label="所属中心店"></el-table-column>
    </el-table>

// 设置单元格样式
     cellStyle({row, column, rowIndex, columnIndex}){  
         if(columnIndex === 1){//指定列号  
             return 'underline'  
         }else{  
             return ''  
         }  
     }

.underline .cell {
        color: #409eff;
        text-decoration: underline;
        text-decoration-color: #409eff;
        cursor: pointer;
    }

#### 点击制定的列并传获取参数 ####

<el-table :data="tableData" height="360" highlight-current-row @row-click="handleRowClick" :cell-class-name="cellStyle">
        <el-table-column prop="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="农户名称">
            <template slot-scope="scope">
                <span @click="handleCellClick(scope)">
                    {
       {scope.row.name}}
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="shop" label="所属中心店"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
    </el-table>

// 某一行被点击
      handleRowClick(row, event, column) {
          // console.log(row, event, column);
      },
    
      // 编辑
      handleCellClick(e) { // 获取传递的参数
          console.log(e);
      },
    
      // 设置单元格样式
      cellStyle({row, column, rowIndex, columnIndex}){  
          if(columnIndex === 1){ //指定列号  
              return 'underline'  
          } 
      },

#### 模态框中重置表单数据 ####

<el-dialog
       :title="titleContent"
         :visible.sync="dialogVisible"
         width="700px"
         :modal-append-to-body="false"
         append-to-body
         :close-on-click-modal="false"
         @close="closeModal('ruleForm')"
     >
         
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
             <el-form-item label="活动名称" prop="name">
                 <el-input v-model="ruleForm.name"></el-input>
             </el-form-item>
         </el-form>
    
         <div slot="footer" class="dialog-footer">
             <el-button @click="cacelModal('ruleForm')">取 消</el-button>
             <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
         </div>
     </el-dialog>

// 表单提交
    submitForm(formName) {
       this.$refs[formName].validate((valid) => {
           if (valid) {
               alert('submit!');
           } else {
               return false;
           }
       });
    },
    
    // 取消
    cacelModal(formName) {
       this.$refs[formName].resetFields()
       this.dialogVisible = false
    },
    
    // 模态框关闭
    closeModal(formName) {
       this.$refs[formName].resetFields()
    }

#### table表格序号 ####

<el-table :data="tableData" border>
      <el-table-column
        type="index" label="序号"
        header-align="center" align="center">
      </el-table-column>
    </el-table>