element-ui（vue）表格的自定义标题，逻辑判断

<el-table :data="tableData" style="width: 100%" border><el-table-column width="180"><!-- 自定义标题--><template slot="header"><i class="el-icon-time"></i><span>自定义标题</span></template><!-- 数据显示 --><template scope="scope"><el-tag v-if="scope.row.show==0">{{scope.row.date}}</el-tag><el-tag type="danger" v-else>{{scope.row.date}}</el-tag></template></el-table-column><el-table-column  prop="name"  width="180"><!-- 自定义标题--><template slot="header">  <el-input size="mini" placeholder="请输入名称搜索"></el-input></template></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table>

        tableData: [{date: '2016-05-02',name: '王小虎',show:0,address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',show:1,address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',show:1,address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',show:1,address: '上海市普陀区金沙江路 1516 弄'}]

效果演示

element-ui（vue）表格的自定义标题，逻辑判断相关推荐

【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
Element ui+vue前端框架组件主题美化后台管理系统模板html
最新设计了一套Element ui主题模板演示地址:Element ui+vue前端框架组件主题美化后台管理系统模板 Element ui版本号:2.15.12 vue版本号:2.7. ...
Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面
Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面官网示例可以看出文字描述在开关两边,看着很别扭. 上代码 <el-switchv-model=" ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
element UI 修改表格边框颜色
element UI 修改表格边框颜色由于我只想要改变该页面的表格边框颜色,加上表格类名 /** 改变边框颜色*/.right-content .el-table--border, .el-tabl ...
vue element ui合并表格（合并某列的行数据）
需求:按需合并某些列的数据自定义数据: tableData:[ { num:0, new_subject_name:"new_subject_name1", count1:&qu ...
在Element UI中表格根据数据动态变化显示表格的内容
需求对于Element UI里的表格,如果假设传入data的数据为数字(事实上其他的字母之类的也可)代表为表格的一些固定选项,而不是直接传入字符串,怎样实现替换.比如对于某个表格的选项,传入的数据用 ...

element-ui（vue）表格的自定义标题，逻辑判断

element-ui（vue）表格的自定义标题，逻辑判断相关推荐

最新文章

热门文章