精华内容
下载资源
问答
  • npm install --save el-table-infinite-scroll 全局引入 import Vue from 'vue'; import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll); 局部引入 [removed] import ...
  • 主要介绍了VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 最近做一个vue前后端分离的项目,前端框架用element ui,在 使用 el-table 的过程中,需要实现行内编辑,效果大概是这样: 分为下面几个步骤: (1) 自定义 el-table 的表头(即添加 “新增” 按钮): <el data=...
  • 本文实例为大家分享了vue el-table实现自定义表头的具体代码,供大家参考,具体内容如下 el-table可以通过设置 Scoped slot 来实现自定义表头。 文档说明如下: 代码实现: <el width=50% visible.sync=isShow ...
  • npm i el-table-sticky -S import Vue from 'vue' import stickyDirective from 'el-table-sticky' Vue . use ( stickyDirective ) < el> </ el> 注意 当前,该指令的使用仅支持表预览,而不支持列复选框模式和列...
  • 改变el-table宽度

    2020-12-12 10:33:30
    vue+element 设置页面表格,el-table拉动每列的宽度,并保存到localStorage里
  • 修改Element中的el-table样式,可以使用以下几种方法:  1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。  2. cell-style 单元格的 style 的回调方法,也可以使用一...
  • 主要介绍了el-table树形表格表单验证(列表生成序号),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了element的el-table中记录滚动条位置的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 亲测 vue el-table前端使用file-saver组件,导出excel ,可导出分页数据,里面有详细步骤
  • el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
  • 主要介绍了vue+element获取el-table某行的下标,根据下标操作数组对象方式,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧
  • 下面小编就为大家分享一篇vue2.0 + element UI 中 el-table 数据导出Excel的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在开发中,需要表格控件根据浏览器高度进行调整,固定表头,本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法,非常具有实用价值,需要的朋友可以参考下
  • 实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
  • element ui el-table 动态改变 单元格 的颜色, 将el-table 包在自定义组件(page_table)里面,可以重复使用。
  • 在elementUI中使用el-table自定义完成transfer组件功能。内有注释使用说明
  • el-table :header-cell-style="{background:'#eee',color:'#606266'}"> ... </el-table> header-cell-style是表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 ...

    初衷

    element ui官方封装好的 el-table 组件, 好用是挺好用的,但不可避免的是默认的样式并不一定能满足实际开发过程中的需要,那就自己动用五姑娘吧。

    入坑

    一是参考官方文档里面 el-table 的 header-cell-style 和 cell-style 属性进行修改,如:

    <el-table header-cell-style="border-color: #868686; color: #606266"></el-table>
    

    另外也可以使用 header-cell-class-name 和 cell-class-name 属性,如:

    <el-table cell-class-name="cell-class-name"></el-table>
    

    style:

    .cell-class-name {
      border-color: #868686;
    }
    

    问题

    使用 header-cell-style和 cell-style 属性虽然能正常显示效果,但会抛出异常,反正我是没整明白,另外,header-cell-class-name 设置覆盖样式,无法生效,而 cell-class-name 则可以。

    该类型检查失败
    该类型检查失败

    解决方法

    设置 el-table 属性:cell-style="tableCellStyle"和:header-cell-style=“tableHeaderCellStyle”,通过 js 代码修改样式。
    里添加:

    <el-table
      :data="tableData"
      :v-loading="tableLoading"
      row-key="id"
      height="100%"
      highlight-current-row
      show-summary
      border
      fit
      style="width: 100%; border:1px solid #EBEEF5; border-color: #868686"
      :cell-style="tableCellStyle"
      :header-cell-style="tableHeaderCellStyle"
    >
      <el-table-column fixed type="index" width="50"></el-table-column>
    </el-table>
    
    <script> => methods方法里添加:
    
    // 修改 table cell边框的背景色
    tableCellStyle () {
       return 'border-color: #868686;'
     },
    // 修改 table header cell的背景色
    tableHeaderCellStyle () {
      return 'border-color: #868686; color: #606266;'
    }
    

    问题描述

    在我们使用饿了么UI框架做项目的时候,el-table的自带的表格边框颜色有时候需要修改一下。本文简述一下修改el-table边框样式的注意事项。

    原始代码

    <template>
      <div id="app">
        <el-table 
          :data="tableData" 
          style="width: 40%" 
          border
        >
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="nation" label="国别" width="180"></el-table-column>
          <el-table-column prop="bornPlace" label="出生地方"> </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    export default {
      name: "app",
      data() {
        return {
          tableData: [
            {
              name: "刘备",
              nation: "蜀国",
              bornPlace: "涿郡涿县(河北省涿州市)",
            },
            {
              name: "曹操",
              nation: "魏国",
              bornPlace: "沛国谯县(安徽省亳州市)",
            },
            {
              name: "孙权",
              nation: "吴国",
              bornPlace: "吴郡富春县(浙江省杭州市富阳区)",
            },
            {
              name: "关羽",
              nation: "蜀国",
              bornPlace: "河东郡解县(山西省运城市盐湖区解州镇)",
            },
          ],
        };
      },
    };
    </script>
    

    效果如下
    在这里插入图片描述

    第一步,加入单元格的回调

    代码如下
    在这里插入图片描述

    效果如下
    在这里插入图片描述

    第二步,加入表头的回调

    代码如下
    在这里插入图片描述

    效果如下
    在这里插入图片描述

    第三步,单独给表格加样式

    代码如下
    在这里插入图片描述
    在这里插入图片描述

    效果如下
    在这里插入图片描述

    展开全文
  • element的el-form和el-table嵌套使用

    千次阅读 2020-08-24 09:12:31
    <template> <div> <el-form :model="addJsonForm" ref="addJsonForm" :rules="addJsonForm.addJsonRules" :inline="true" ...el-table :data="addJsonForm.params" style="width: 10

    一、element的el-form和el-table嵌套使用

    要点:

    1. :model="addJsonForm" 给表单绑定数据,addJsonForm 是传入表单的数据对象
    2. 注意表单数据对象 addJsonForm 的定义:属性 params (可按需求命名)为表单内嵌套的表格的显示数据,数组类型; 属性 addJsonRules ,为表单绑定的验证规则。
    3. el-table 采用自定义列模板,可自定义表头, el-form 表单项绑定对应的字段名和校验规则
    4. :prop="'params.' + scope.$index + '.name'" 绑定传入Form 组件的 model 中对应的字段 name
    5. :rules="addJsonForm.addJsonRules.name" 绑定表单验证规则
    <template>
      <div>
        <el-form
          :model="addJsonForm"
          ref="addJsonForm"
          :rules="addJsonForm.addJsonRules"
          :inline="true"
          label-width="108px"
        >
          <el-table :data="addJsonForm.params" style="width: 100%" border>
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
    
            <el-table-column align="center">
              <template slot="header" slot-scope="scope">
                <span style="color:#2d65dc;">成员名称</span>
                <i style="color:#F56C6C;">*</i>
              </template>
              <template slot-scope="scope">
                <el-form-item
                  :prop="'params.' + scope.$index + '.name'"
                  :rules="addJsonForm.addJsonRules.name"
                >
                  <el-input
                    type="text"
                    v-model="scope.row.name"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template slot="header" slot-scope="scope">
                <span style="color:#2d65dc;">成员值</span>
                <i style="color:#F56C6C;">*</i>
              </template>
              <template slot-scope="scope">
                <el-form-item
                  :prop="'params.' + scope.$index + '.value'"
                  :rules="addJsonForm.addJsonRules.value"
                >
                  <el-input
                    type="text"
                    v-model="scope.row.value"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          addJsonForm: {
            params: [
              {
                name: "",
                value: ""
              }
            ],
            addJsonRules: {
              name: [
                { required: true, message: "请输入成员名称", trigger: "blur" }
              ],
              value: [
                { required: true, message: "成员值不能为空", trigger: "blur" }
              ]
            }
          }
        };
      }
    };
    </script>
    

    在这里插入图片描述

    二、应用实例

    点击添加的时候,动态增加表格的行数,点击删除的时候,删除表格的行数据。

    在这里插入图片描述
    近期更新: 因评论区问到后续如何用 Form 表单的 resetFields 方法,这里就新加一个重置功能。

    <template>
      <div>
        <el-button @click="showPopup">点击显示弹框</el-button>
        <h3>
          dataSourceJson: <span>{{ FormInAddPopup.dataSourceJson }}</span>
        </h3>
        <el-dialog
          class="comn_dialog"
          title="添加数据"
          :visible.sync="addJsonVisible"
          width="415px"
          top="23vh"
        >
          <el-button @click="addTableItem">添加</el-button>
          <el-button @click="delTableItem">删除</el-button>
          /* 近期更新 */
          <el-button @click="resetForm('myForm')">重置</el-button> 
          <el-form
            :model="addJsonForm"
            ref="addJsonForm"
            :rules="addJsonForm.addJsonRules"
            :inline="true"
            label-width="108px"
          >
            <el-table
              :data="addJsonForm.params"
              style="width: 100%"
              border
              @selection-change="addJsonSelectionChange"
            >
              <el-table-column type="selection" width="55" align="center">
              </el-table-column>
    
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">成员名称</span>
                  <i style="color:#F56C6C;">*</i>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.name'"
                    :rules="addJsonForm.addJsonRules.name"
                  >
                    <el-input
                      type="text"
                      v-model="scope.row.name"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">成员值</span>
                  <i style="color:#F56C6C;">*</i>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.value'"
                    :rules="addJsonForm.addJsonRules.value"
                  >
                    <el-input
                      type="text"
                      v-model="scope.row.value"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="resetAddJsonPopup">取 消</el-button>
            <el-button type="primary" @click="submitAddJsonPopup">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          addJsonVisible: false,
          addJsonMultiple: [],
          FormInAddPopup: {
            dataSourceJson: "" // 获取到的dataJson,显示为 [{name:"",value:""},{name:"",value:""}] 的格式
          },
          tabItemId: 1, // 表格数据的 id
          addJsonForm: {
            params: [
              {
                name: "",
                value: "",
                tabItemId: 1 // 弹框中,删除空行的唯一标志,默认从1开始
              }
            ],
            addJsonRules: {
              name: [
                { required: true, message: "请输入成员名称", trigger: "blur" }
              ],
              value: [
                { required: true, message: "成员值不能为空", trigger: "blur" }
              ]
            }
          }
        };
      },
      methods: {
      // 近期更新
        resetForm(formName) {
          this.$refs[formName].resetFields();
       },
        RndNum(n) {
          // 生成随机数
          let rdmNum = "";
          for (let i = 0; i < n; i++) {
            rdmNum += Math.floor(Math.random() * 10); // [0,10)的整数
          }
          return rdmNum;
        },
        showPopup() {
          
          this.addJsonVisible = true;
        },
        addJsonSelectionChange(val) {
          this.addJsonMultiple = val;
        },
        resetAddJsonPopup() {
          //关闭 固定值弹窗
          this.$set(this.addJsonForm, "params", []);
          this.addJsonVisible = false;
        },
        submitAddJsonPopup() {
          //保存 固定值
          if (this.addJsonMultiple.length > 0) {
            this.$refs["addJsonForm"].validate(valid => {
              if (valid) {
                let result = [];
                this.addJsonMultiple.map(val => {
                  this.$delete(val, "tabItemId"); // 删除tabItemId属性
                  result.push(val);
                });
                result.length ? (result = JSON.stringify(result)) : (result = "");
                this.FormInAddPopup.dataSourceJson = result;
                this.addJsonVisible = false;
              } else {
                return false;
              }
            });
          } else {
            this.$message.warning("请选择要保存的数据");
          }
        },
        addTableItem() {
          this.tabItemId = "T" + this.RndNum(6); //生成以T开头的七位随机数
          this.addJsonForm.params.push({
            name: "",
            value: "",
            tabItemId: this.tabItemId
          });
        },
    
        delTableItem() {
          // 确认删除
          if (this.addJsonMultiple.length > 0) {
            let arrs = [];
            let ids = this.addJsonMultiple.map(val => val.tabItemId); //拿到选中的数据id,
            this.addJsonForm.params.forEach(item => {
              if (!ids.includes(item.tabItemId)) {
                // 当id在params中,表示数据被选中,该将其删除,即将不被选中的保留
                arrs.push(item);
              }
            });
            this.addJsonForm.params = arrs;
          } else {
            this.$message.warning("请选择要删除的数据");
          }
        }
      }
    };
    </script>
    
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • el-table的高度自适应问题 el-table__body-wrapper的高度大于el-table__body的高度,导致表格最后一行后有留白,大致如下: 通过设置了表格外层的高度为当前的90%可以解决数据固定的表格问题 .el-table__body-...

    el-table的高度自适应问题

    el-table__body-wrapper的高度大于el-table__body的高度,导致表格最后一行后有留白,大致如下:
    在这里插入图片描述
    通过设置了表格外层的高度为当前的90%可以解决数据固定的表格问题

    .el-table__body-wrapper {
        height: 90%!important;   //具体百分比可以根据自身情况调整
      }
    

    但此法缺乏灵活性

    当前表格有一个固定高度的显示区域,超出高度自动滚动,滚动时无此样式Bug所以无需处理,只需要对于表格行数不足以沾满固定高度时动态设置高度

    通过调整样式发现,固定高度最多放下7行内容,大于等于7行数据时表格滚动,样式正常,数据小于7行时,改变表格高度为 tableHeifght=tableData.length*每行高度; 将tableHeigh设置在table标签上

    <el-table :data="tableData"  :height="tableHeight" border >
    ...
    </el-table>
    

    tablleHeight初始化为最大高度

    检测数据项数,调整表格高度

    if(this.tableData.length<7){
      this.tableHeight = this.tableData.length*42+39; //每行表格高度*项数+表头高度
    }
    

    这里是一种比较方便的思路

    展开全文
  • element-ui el-tableel-form同用,并校验

    万次阅读 多人点赞 2019-08-28 00:03:10
    文章目录基本结构添加校验自己写校验方法其他校验 基本结构 <template> <div> <el-form ref="form" :model...el-table ref="table" :data="form.tableData" empty-text='暂无数据'> <el-ta...

    基本结构

    在这里插入图片描述

    <template>
      <div>
        <el-form ref="form" :model="form">
          <el-table  ref="table" :data="form.tableData" empty-text='暂无数据'>
            <el-table-column label="姓名">
              <template slot-scope="scope">
                <el-form-item >
                  <el-input v-model="scope.row.name"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="年龄">
              <template slot-scope="scope">
                <el-form-item >
                  <el-input v-model.number="scope.row.age" type="number"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column  label="操作">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="del(scope.$index)" icon='el-icon-delete'></el-button>
                <el-button type="primary" size="mini" @click="add" icon='el-icon-plus'></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          form: {
            tableData: [
              {
                name: "aaa",
                age: 11
              },
              {
                name: "",
                age: ''
              }
            ]
          }
        };
      },
      methods:{
          add(){
              this.form.tableData.push({
                  name: "",
                  age: ''
              })
          },
          del(index){
              this.form.tableData.splice(index,1);
          }
      }
    };
    </script>
    

    el-table 数据是数组 , el-form 数据是 对象

    添加校验

    Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

    方法1:

    <el-form :rules='rules'  ...>
    
    <el-form-item :prop=" 'tableData.' + scope.$index + '.name' " :rules='rules.name'>
    
    data(){
    	return {
        	rules: {
    	        name: [
    	          { required: true, message: '名字不能为空', trigger: 'blur' }
    	        ]
    	      }
        }
    }
    

    方法2:
    <el-form-item :prop=" 'tableData.' + scope.$index + '.name' " :rules="{ required: true, message: '名字不能为空', trigger: 'blur' }">

     <el-table-column label="姓名">
       <template slot-scope="scope">
         <el-form-item :prop=" 'tableData.' + scope.$index + '.name' " 
            :rules="{ required: true, message: '名字不能为空', trigger: 'blur' }">
           <el-input v-model="scope.row.name"></el-input>
         </el-form-item>
       </template>
     </el-table-column>
    

    自己写校验方法

    方法1 : 对应上面的方法1,校验犯法写在data中.

    data() {
          var checkAge = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('年龄不能为空'));
            }else if(!Number.isInteger(value) ){
                callback(new Error('请输入数字值'));
            }else if(value < 18){
                callback(new Error('必须年满18岁'));
            }else if(value >50){
                callback(new Error('小于50岁'));
            }else{
                callback();
            }
          };
          var checkName = (rule, value, callback) => {
              let regName =/^[\u4e00-\u9fa5]{2,4}$/;
            if (!value) {
              return callback(new Error('姓名不能为空'));
            }else if(!regName.test(value)){
                callback(new Error('请输入正确的姓名'));
            }else{
                callback();
            }
          };
        return {
          form: {
            tableData: [
              {
                name: "",
                age: ''
              }
            ]
          },
          rules: {
            name: [
              { required: true, trigger: 'blur' ,validator: checkName}
            ],
            age: [
              { required: true, trigger: 'blur', validator: checkAge}
            ],
          }
        };
      },
    

    方法2: 对应上面的方法2,校验犯法写在methods中.

    <el-form-item :prop=" 'tableData.' + scope.$index + '.name' " :rules=" { required: true, trigger: 'blur' ,validator: checkName}">
    
    <el-form-item :prop=" 'tableData.' + scope.$index + '.age' " :rules=" { required: true, trigger: 'blur' ,validator: checkAge}">
    
    methods:{
          checkAge  (rule, value, callback)  {
            if (!value) {
              return callback(new Error('年龄不能为空'));
            }else if(!Number.isInteger(value) ){
                callback(new Error('请输入数字值'));
            }else if(value < 18){
                callback(new Error('必须年满18岁'));
            }else if(value >50){
                callback(new Error('小于50岁'));
            }else{
                callback();
            }
          },
          checkName (rule, value, callback) {
            let regName =/^[\u4e00-\u9fa5]{2,4}$/;
            if (!value) {
              return callback(new Error('姓名不能为空'));
            }else if(!regName.test(value)){
                callback(new Error('请输入正确的姓名'));
            }else{
                callback();
            }
          }
      }
    

    同table中,某字段不能重复


    8.27 更新

    之前写了一个同table中,不能写相同的电话号码的校验,但是并不好。修改后如下

    <el-table-column label="电话号码">
       <template slot-scope="scope">
         <el-form-item
           :prop=" 'tableData.' + scope.$index + '.tel' "
           :rules=" { required: true, trigger: 'blur' ,validator: checkTel}"
         >
           <el-input
             v-model.number="scope.row.tel"
             type="number"
             @blur="telequalCheckblur(scope.$index,scope.row.tel)"
           ></el-input>
         </el-form-item>
       </template>
     </el-table-column>
    
    methods:{
    	checkTel(rule, value, callback) {
          let regTel = /^(((1[3456789][0-9]{1})|(15[0-9]{1}))+\d{8})$/;
          let index = rule.field.split(".")[1];
          if (!value) {
            return callback(new Error("电话号码不能为空"));
          } else if (!regTel.test(value)) {
            callback(new Error("请输入正确的电话号码"));
          } else if (this.telequalCheck(index, value)) {
            callback(new Error("电话号码重复,请重新填写"));
          } else {
            callback();
          }
        },
        //相等判断
        telequalCheck(index, value) {
          return this.form.tableData.some(({ tel }, i) => {
            console.log(i, index, i == index);
            return i == index ? false : tel === value;
          });
        },
    }
    

    9.14更新

    必填*显示

    1. 输入框前加*

    正常来说,在el-form中,使用rules的required: true,就能显示*了.
    因为是在表格中,所以表单就不使用label了,所以这时必填选项的*没有了.
    在这里插入图片描述
    注意:这里面label=' '必须有空格,否则还是没有*
    在这里插入图片描述


    9.17更新

    2. 表头加*

    1.el-table>添加 header-cell-class-name='required'

    参数说明类型可选值默认值
    header-cell-class-name表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 className。Function({row, column, rowIndex, columnIndex})/String

    在这里插入图片描述
    2. elment 有默认的样式,如果不想要,就换个class名字
    header-cell-class-name='requiredclass'

    <style>
    .requiredclass>div.cell::before{
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
    </style>
    

    在这里插入图片描述
    3. 只加某几个
    :header-cell-class-name='addHeaderCellClassName'

    addHeaderCellClassName({row, column, rowIndex, columnIndex}){
          if(columnIndex===0 || columnIndex===1){
            return 'requiredclass'
          }
        }
    

    在这里插入图片描述

    1. 自定义表头

    在需要添加*的位置添加自定义表头

    在这里插入图片描述

    .requiredclass::before{
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
    

    删除某行,同时删除这行的校验结果

    问题: 删除某行时,这行的校验结果不随着删除
    观察图片,删除第三行,第三行的校验结果,还在.
    在这里插入图片描述
    解决方法

    1. 删除时,对表单进行校验
    del(index) {
      this.form.tableData.splice(index, 1);
      this.$refs.form.validate()
    },
    
    1. row-key

    绑定row-key,绑定的值要保证存在且唯一

     <el-form ref="form" :model="form" label-width="20px">
          <el-table
            ref="table"
            :data="form.tableData"
            empty-text="暂无数据"
            header-cell-class-name="requiredclass"
            row-key='id'
          >
          ...
    
    
     form: {
        tableData: [
          {
            name: "张一",
            age: 19,
            id:'1',
            tel: 13333333332
          },
        ]
      }
    

    代码及展示地址

    展开全文
  • el-table的使用总结

    千次阅读 2021-04-06 10:42:35
    el-table :data="tableData" header-row-class-name="header_row_className" :header-cell-style="{ 'background-color': '#E5EEFF' }" @selection-change="handleSelectionChange" style="width: 100%"> ...
  • 前端vue开发后台项目经常会使用element-ui组件,估计el-table组件算是其中使用率相当高的了,在这其中有时候就会出现表格列偏移的问题,尤其是列较长表格设置表头或者表尾列固定时 经过测试,发现设置使用 :min-...
  • element-ui el-table组件的 el-table-column 加了fixed属性列固定后样式高度错乱 原因 el-table-column 列加了fixed="right"操作后,从源码上来看,加入fixed之后这个列的高度是动态计算的,页面加了缓存,再次...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 86,925
精华内容 34,770
关键字:

el-table