网站建设遵循的原则是什么,网页设计与网站建设教学视频,邢台做网站信息,营销型网站收费前些天发现了一个巨牛的人工智能学习网站#xff0c;通俗易懂#xff0c;风趣幽默#xff0c;忍不住分享一下给大家。点击跳转到教程。
1. 效果#xff1a;如红框中部分。
一选全选#xff1a;表头上的单选框选中则下面每行都选中。
全选一选#xff1a;表中数据每行都…前些天发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住分享一下给大家。点击跳转到教程。
1. 效果如红框中部分。
一选全选表头上的单选框选中则下面每行都选中。
全选一选表中数据每行都选中时自动选中表头中那个单选框。 2. 代码 我的表格是作的万能表格所有表头、表数据都来自参数此处略。 对于表格使用及实现方法见博文VUE : 双重 for 循环写法、table 解析任意 list
templatedivtable classtable table-hovertheadtrth!-- 表头中的单选框 --input typecheckbox idselectAll/th!-- 循环出表头用英文的逗号拆分字串 --th v-for(item,index) in headerList.split(,) :keyindex{{item}}/th/tr/theadtbody!-- 循环出有多少行数据即 list 中有多少条数据得到 list 中的每个元素 --tr v-for(item,index) in bodyInfoList :keyindextd!-- 表数据中首列单选框 --input typecheckbox classselectSingle clickselectSingle()/td!-- 循环取到元素的每个属性并展示 --td v-for(val,index) in item :keyindex{{val}}/td/tr/tbody/table/div
/templatescript
export default {name: one,props: {headerList: {type: String, // 亦可接收 Object 类型参数default: headerList},bodyInfoList: {type: Array,default: bodyInfoList}},methods: {// 全选一选// 此方法不可写在created、mounted中会有时无效// 无效原因: html 还未加载完就已经初始化方法。selectSingle() {if ($(.selectSingle).length $(.selectSingle:checked).length) {$(#selectAll).prop(checked, true);} else {$(#selectAll).prop(checked, false);}}},created() {},mounted() {// 一选全选$(#selectAll).click(function(e) {// $(#selectAll).on(click, function() { 此写法和上面一行运行效果一样$(.selectSingle).prop(checked, this.checked);});}
};
/script
