element带选择表格将表头的复选框改成文字的实现代码_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

使用jquery的each()方法遍历单元格,如果满足条件则进行相应的操作$(selector).each(function(index,element))实例演示:在表格中按姓名查找记录,找到则突出显示,否则给出提示创建Html元素<div class="box"><span>实例演示:在表格中按姓名查找记录</span><br><div class="content">姓名: <input type="text" name="name"> <input type="button" value="查找">    <table>        <tr><td>张三</td><td>175</td><td>140</td></tr>        <tr><td>李四</td><td>170</td><td>120</td></tr>        <tr><td>王五</td><td>185</td><td>160</td></tr>    </table></div></div>设置css样式div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}div.box>span{color:#999;font-style:italic;}div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}input[type='text']{width:100px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}input[type='button']{height:30px;margin:10px;padding:5px 10px;}table{border-collapse:collapse;}td{width:80px;height:30px;line-height:30px;text-align:center;border:1px solid green;}.selected{font-weight:bold !important; background: #ff99cc !important;color:#fff;}编写jquery代码$(function(){ $(":button").click(function() {$("table tr").removeClass('selected');   // 还原样式name = $("input[name='name']").val();    // 要查找的名字flag = true;                             // 表示未查到目标$("table tr").find("td:first").each(function() {if($(this).html()==name){            // 如果找到了$(this).parent("tr").addClass('selected');    // 为整行设置样式flag = false;                    // 将未找到标记设为falsereturn false;                    // 提前终止循环}});if(flag)                                 // 如果没找到就给出提示alert("查无此人");  });});观察效果如果表中有相应记录如果表中并无相应记录www.zgxue.com防采集请勿采集本网。

方法一:使用表格属性:header-cell-class-name 表格界面代码

<el-table ref="multipleTable" :data="tableData" :header-cell-class-name="cellclass" style="width: 100%"> <el-table-column type="selection"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" > </el-table-column> </el-table>

对应js

data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], multipleSelection: [] } }, methods: { cellclass(row){ if(row.columnIndex===0){ return 'DisabledSelection' } } }

对应CSS

.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{ display:none; position:relative;}.el-table /deep/.DisabledSelection .cell:before{ content:"选择"; position:absolute; right 11px;}

/deep/的作用:如果你使用了别人的组件或者自己开发一个组件,有时候你修改一处就可能影响到别的地方,这个时候要么你不用别人的组件,自己重新封装一个,但很多时候是不太现实的,所以就需要使用/deep/,既不影响到别的地方,又能修改子组件在当前的样式。

方法二、使用表格列标题属性:label-class-name

界面代码

<el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column label-class-name="DisabledSelection" type="selection"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table>

对应CSS

.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{ display:none; position:relative;}.el-table /deep/.DisabledSelection .cell:before{ content:"选择"; position:absolute; right 11px;}

方法三:使用document.querySelector() 界面代码

<el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table>

对应js

mounted(){ this.$nextTick(()=>{ this.init(); })},methods: { init(){ document.querySelector(".el-checkbox__inner").style.display="none"; document.querySelector(".cell").innerHTML = '选择' }}

方法四:不使用selection选择列,重写列使用checkbox

<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="选择" width="50"> <template slot-scope="scope"> <el-checkbox></el-checkbox></template> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table>

方法五:直接通过CSS样式修改

.el-table__header .el-table-column--selection .cell .el-checkbox { display:none}.el-table__header .el-table-column--selection .cell:before { content: "选择";}

总结

到此这篇关于element带选择表格将表头的复选框改成文字的文章就介绍到这了,更多相关选择表格将表头的复选框改成文字内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

一个功能更加强大的 Vue 表格组件 查看vxe-table 功能点 •基础 •尺寸 •斑马线条纹 •带边框 •单元格样式 •列宽拖动 •流体高度 •固定表头 •固定列 •固定表头和列 •表头分组 •序号 •单选 •多选 •排序 •筛选 •合并行或列 •表尾合计 •导出 CSV •显示/隐藏列 •加载中 •格式化内容 •自定义模板 •快捷菜单 •滚动渲染 •展开行 •树形表格 •可编辑表格 •数据校验 •全键盘操作 •Excel 表格 例子 <template> <div> <vxe-table ref="xTable" :data.sync="tableData"> <vxe-table-column type="index" width="60"></vxe-table-column> <vxe-table-column prop="name" label="Name"></vxe-table-column> <vxe-table-column prop="date" label="Date"></vxe-table-column> <vxe-table-column prop="address" label="Address"></vxe-table-column> </vxe-table> </div> </template> <script> export default { data () { return { tableData: [ { id: 10001, name: 'test1', sex: 'Man', date: '2019-05-01', address: 'address abc123' } ] } } } </script> 总结 以上所述是小编给大家介绍的vxe-table vue table 表格组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 您可能感兴趣的文章:VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法对Vue table 动态表格td可编辑的方法详解vue element-ui table表格滚动加载方法详解vue2.0的Element UI的表格table列时间戳格式化使用vue和datatables进行表格的服务器端分页实例代码vue2.0结合DataTable插件实现表格动态刷新的方法详解内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • element带选择表格将表头的复选框改成文字的实现代码
  • css中一些常用的font-size字体单位和line-height详解
  • css+html实现skeleton screen 加载占位图动画效果(带动画)
  • css盒子隐藏/显示后再最上层的实现代码
  • css中转换为行内样式的解决方案(css-inline)
  • css实现波动水球效果的示例代码
  • css使用@media响应式适配各种屏幕的方法示例
  • css设置div背景图的实现代码
  • css将img图片填满父容器div自适应容器大小的实现方法
  • 一文掌握css 属性display:flow-root声明
  • able vue table 表格组件功能
  • jquery如何实现一个表格的筛选,也就是按条件查找筛选
  • Js中如何获取GridView中的值?
  • 谁有section-柱状图数据库
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程文字复选框表头选择表格element带选择表格将表头的复选框改成文字的实现代码css实现波动水球效果的示例代码css使用@media响应式适配各种屏幕的方法示例css设置div背景图的实现代码一文掌握css 属性display:flow-root声明css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字element带选择表格将表头的复选框改成文字的实现代码css中一些常用的font-size字体单位和line-height详解css+html实现skeleton screen 加载占位图动画效果(带css盒子隐藏/显示后再最上层的实现代码css中转换为行内样式的解决方案(css-inline)css实现波动水球效果的示例代码css使用@media响应式适配各种屏幕的方法示例css设置div背景图的实现代码css将img图片填满父容器div自适应容器大小的实现方法一文掌握css 属性display:flow-root声明
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved