首页 > 其他分享 >element-ui(table表格)

element-ui(table表格)

时间:2023-08-25 16:12:01浏览次数:35  
标签:表格 element ui scope table 属性 数据 row

el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列宽。

<el-table :data="tableData" style="width: 100%">
 <el-table-column prop="date" label="日期" width="180"></el-table-column>
 <el-table-column prop="name" label="姓名" width="180"></el-table-column>
</el-table>

默认情况下,Table 组件是不具有竖直方向的边框的,如果需要,可以使用border属性,它接受一个Boolean,设置为true即可启用。

获取当前行数据

表格中的数据是已经显示过的,要想拿到当前表格中指定行数的数据时,则需要在template标签中添加这个属性即可slot-scope=“scope, 同时写出一个点击事件的方法如编辑按钮,其中 scope.row就是拿到当前行的所有数据,如果要想拿到指定数据,则需要指定你当前行指定需要的数据的字段就好,如:scope.row.musicId

<el-table-column label="操作" align="center" min-width="100">
    <template slot-scope="scope">
        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
    </template>
</el-table-column>

格式化formatter

用来格式化内容。默认参数 Function(row, column, cellValue, index),案例:后端返回1、0,前端显示为是、否

<el-table-column :formatter="envFormatter" label="小程序环境" prop="env" width="120"/>

methods: {
envFormatter(row) {
      switch (row.env) {
        case 'pro':
          return '线上'
        case 'qa':
          return '测试'
      }
    },
  }

 

标签:表格,element,ui,scope,table,属性,数据,row
From: https://www.cnblogs.com/yjh1995/p/17657213.html

相关文章

  • uiautomator2 截图+压缩图片+放入allure报告中
    defsave_screenshot(self,screenshot_path):"""截图保存到某个路径:paramscreenshot_path::return:"""self.d.screenshot(screenshot_path) screenshot_path=f&quo......
  • element-ui
    安装npmielement-ui-S引入Element在main.js中写入以下内容:importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);new......
  • arduino上读取北斗+GPS双模定位模块的数据
    前言本周学习内容主要是实现在arduino上读取北斗+GPS双模定位模块的数据烧录程序及查看数据1.打开示例程序,选择arduinouno,串口号填USB的COM端口2.上传示例示例程序到uno板子上,点击右箭头就好。注意,这个时候不要接定位模块的串口,就是不要接线,会导致烧录失败。因为程序中......
  • 使用Iconfont制作字体图标库并引入到Element项目中
    1引子1.1图标的重要性图标用来描述某种具体的功能,能够使用户更轻松的理解信息、获取信息。好的图标设计易于被发现、易于被理解,且具有美感与吸引力,能够丰富用户体验。1.2字体图标的好处字体图标是一种特殊的字体,以图像的形式展现给用户。使用字体图标的好处有:相较于图片,字体图标......
  • CSS:table单实线边框的实现方案与浏览器兼容性验证
    摘要本文主要探讨table单实线边框的几种实现方案,以及各个方案的浏览器兼容性验证(Chrome、Edge、Firefox、IE)。引子项目上希望业务表单在填写时,展现形式可以做成该表单实际打印出来的样子,而不是ElementUI等前端框架所提供的form样式。在使用table做表单时,Chrome出现了表格边框粗细......
  • iOS开发之--TableViewCell重用机制避免重复显示问题
    常规配置如下当超过tableView显示的范围的时候后面显示的内容将会和前面重复//这样配置的话超过页面显示的内容会重复出现-(UITableViewCell*)tableView:(UITableView*)tableViewcellForRowAtIndexPath:(NSIndexPath*)indexPath{//定义唯一标识staticNSStrin......
  • ios开发之 -- UIView总结
    如果想调用某个类的某个方法可以写成这样,这个方法来自NSObject类performSelector:performSelector:withObject:performSelector:withObject:withObject: 实际调用[selfperformSelector:@selector(displayViews)withObject:nilafterDelay:1.0f];有三个方法分别是//父视图......
  • ios 开发之 -- UILabel的text竖行显示
    让UILabel的内容竖行显示,我经常用一下两种方式:第一种:使用换行符\nlabel.text=@"请\n竖\n直\n方\n向\n排\n列";label.numberOfLines=[label.textlength];第二种:使用lineBreakMode属性label.text=@"请竖行显示";label.lineBreakMode=NSLineBreakByWordWrapping;//换行模......
  • VisionPro C#调用QuickBuild操作
    在VisionPro中,常见的操作是:将产品多种型号分别定义成多个QuickBuild。(PS:产品A调用QuickBuild1,产品B调用QuickBuild2) 一个QuickBuild(JobManager)文件下可以包括若干个作业(Job),如果一个项目连接多个工业相机,那么可以将相机单独绑定到Job上。Job中可以包含采像工具、ToolBlock......
  • element-ui 中 Cascader 级联选择器同时获取value值和label值
    给Cascader级联选择器添加一个别名 复制代码<el-cascader:options="options"ref="myCascader"></el-cascader>选择完毕之后可以通过别名获取 复制代码letlabelValue=this.$refs['myCascader'].inputValue当然,element-ui在一直更新变化,label值的字......