vue+element常见细节总结

最新推荐文章于 2022-06-15 16:59:40 发布

yw00yw

最新推荐文章于 2022-06-15 16:59:40 发布

阅读量255

点赞数

分类专栏： vue 文章标签： vue element table tr td

本文链接：https://blog.csdn.net/yw00yw/article/details/101537893

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

修改表格某一列单元格的样式–方式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>