多级checkbox关联选择(权限管理)

2019-01-13 admin

1、依赖element-ui,只是使用了el-checkbox,可以很轻松替换掉

效果图:

图片描述


<template>
  <app-scroll-box class="page-clientsManage">
    <el-row class="pa-20">
      <el-card class="table-card mt-20">
        <el-row slot="header" class="clearfix">
          <el-row class="fl">
            <span class="title">疫区设置:{{ itemTitle }}</span>
          </el-row>
        </el-row>
        <div class="deliverySetting">
          <div class="deliverySetting-table" v-for="(item, idx) in countries" :key="idx">
            <div class="table-body" v-for="(pro, idx2) in item.pros" :key="idx2">
              <div class="first-col">
                <span
                  v-if="idx2 == 0"
                  style="display: inline-block; line-height: 30px; cursor: pointer; "
                >
                  <el-checkbox @change="handleChecked('country', item)" :label="item.cname" v-model="item.checked" :key="item.cid">{{ item.cname }}</el-checkbox>
                </span>
              </div>
              <div class="width120">
                <span style="display: inline-block; line-height: 30px; cursor: pointer; ">
                  <el-checkbox @change="handleChecked('pro', pro)" :label="pro.pname" v-model="pro.checked" :key="pro.pid">{{ pro.pname }}</el-checkbox>
                </span>
              </div>
              <div class="width265">
                <el-checkbox
                  v-for="c in pro.cities"
                  v-model="c.checked"
                  :label="c.cityName"
                  :key="c.cityId"
                  @change="handleChecked('city', c)"
                >{{c.cityName}}</el-checkbox>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-row>
  </app-scroll-box>
</template>
<script>
export default {
  name: "deliverySetting",
  components: {},
  props: {},
  data() {
    return {
      itemTitle: "",
      itemId: 0,
      countries: [
        {
          cid: 1,
          cname: "中国",
          pid: "1",
          pname: "广东",
          cityId: 1,
          cityName: "深圳"
        },
        {
          cid: 1,
          cname: "中国",
          pid: "1",
          pname: "广东",
          cityId: 2,
          cityName: "肇庆"
        },
        {
          cid: 1,
          cname: "中国",
          pid: "2",
          pname: "湖北",
          cityId: 3,
          cityName: "武汉"
        },
        {
          cid: 1,
          cname: "中国",
          pid: "2",
          pname: "湖北",
          cityId: 4,
          cityName: "咸宁"
        },
        {
          cid: 1,
          cname: "中国",
          pid: "2",
          pname: "湖北",
          cityId: 5,
          cityName: "恩施"
        },
        {
          cid: 2,
          cname: "美国",
          pid: "3",
          pname: "usa省州1",
          cityId: 6,
          cityName: "usa-city-1"
        },
        {
          cid: 2,
          cname: "美国",
          pid: "3",
          pname: "usa省州1",
          cityId: 7,
          cityName: "usa-city-2"
        },
        {
          cid: 2,
          cname: "美国",
          pid: "3",
          pname: "usa省州1",
          cityId: 8,
          cityName: "usa-city-3"
        },
        {
          cid: 2,
          cname: "美国",
          pid: "4",
          pname: "usa省州2",
          cityId: 9,
          cityName: "usa-city-4"
        },
        {
          cid: 2,
          cname: "美国",
          pid: "4",
          pname: "usa省州2",
          cityId: 10,
          cityName: "usa-city-5"
        }
      ],
      checkedCities: [1, 4, 9, 10]
    };
  },
  computed: {},
  methods: {
    initPage() {
      let { itemId, itemTitle } = this.$route.query;
      this.itemId = itemId;
      this.itemTitle = itemTitle;

      this.initAreaData();
    },
    //初始化数据
    initAreaData() {
      this.countries = this.countries.map(item => {
        let res = item;
        if (this.checkedCities.includes(item.cityId)) {
          res.checked = true;
        } else {
          res.checked = false;
        }
        return res;
      });

      let resCities = [];
      this.countries.forEach(item => {
        let obj = {};
        let existsCountry = resCities.find(c => {
          return c.cid == item.cid;
        });

        if (existsCountry) {
          obj = existsCountry;
        } else {
          obj.cid = item.cid;
          obj.cname = item.cname;
        }

        obj.checked = false;

        if (!obj.pros) {
          obj.pros = [];
        }

        let existsPro = obj.pros.find(c => {
          return c.pid == item.pid;
        });

        if (!existsPro) {
          existsPro = {
            pid: item.pid,
            pname: item.pname,
            checked: false
          };
          obj.pros.push(existsPro);
        }

        if (!existsPro.cities) {
          existsPro.cities = [];
        }

        existsPro.cities.push({
          cityId: item.cityId,
          cityName: item.cityName,
          checked: item.checked
        });

        if (!existsCountry) {
          resCities.push(obj);
        }
      });

      this.countries = resCities;
      this.opreationData()
    },
    //操作数据
    opreationData() {
      this.countries.forEach(c => {
        c.pros.forEach(p => {
          if(p.cities && p.cities.length > 0){
            p.checked = p.cities.every(p => p.checked)
          }
        })

        if(c.pros && c.pros.length > 0){
          c.checked = c.pros.every(p => p.checked)
        }
      })
    },
    handleChecked(level, item) {
      let isChecked = item.checked
      switch(level){
        case "country":
          if(item && item.pros){
            item.pros.forEach(p => {
              if(p.cities){
                p.cities.forEach(c => {
                  c.checked = isChecked
                })
              }
            })
          }
          break;
        case "pro":
          if(item && item.cities){
            item.cities.forEach(c => {
              c.checked = isChecked
            })
          }
          break;
        case "city":
          break;
      }
      this.opreationData()
    }
  },
  created: function() {},
  mounted() {
    this.initPage();
  },
  watch: {}
};
</script>
<style>
.el-checkbox__label {
  padding-left: 5px;
}
.first-col {
  padding-left: 20px;
  width: 120px;
}
.deliverySetting {
  padding: 20px 0;
  position: relative;
}
.deliverySetting .el-table thead tr th {
  font-size: 14px;
}
.deliverySetting .el-table tbody tr td {
  vertical-align: baseline;
}
.deliverySetting .el-table tbody tr td p {
  line-height: 30px;
}
.deliverySetting .el-table tbody tr td .el-checkbox-group {
  display: flex;
  flex-direction: column;
}
.deliverySetting .el-table tbody tr td .el-checkbox-group label {
  line-height: 30px;
  margin-left: 0;
}
.deliverySetting .deliverySetting-table {
  font-size: 14px;
  color: #333;
}
.deliverySetting .deliverySetting-table .table-head,
.deliverySetting .deliverySetting-table .table-body {
  display: flex;
  padding: 10px 0;
}
.deliverySetting .deliverySetting-table .table-head .selection,
.deliverySetting .deliverySetting-table .table-body .selection {
  /* width: 45px; */
  text-align: center;
  line-height: 36px;
}
.deliverySetting .deliverySetting-table .table-head .width120,
.deliverySetting .deliverySetting-table .table-body .width120 {
  width: 120px;
}
/* .deliverySetting .deliverySetting-table .table-head .width265,
.deliverySetting .deliverySetting-table .table-body .width265 {
  width: 265px;
} */
.deliverySetting .deliverySetting-table .table-head {
  height: 36px;
  align-items: center;
  background-color: #e7f2ff;
}
.deliverySetting .deliverySetting-table .table-body {
  border-bottom: 1px solid #e4e4e4;
  color: #666;
}
.deliverySetting .deliverySetting-table .table-body:hover {
  background-color: #f5f7fa;
}
/* .deliverySetting .deliverySetting-table .table-body .width265 {
  display: flex;
  flex-direction: column;
} */
.deliverySetting .deliverySetting-table .table-body .width265 label {
  line-height: 30px;
  margin-left: 0;
  color: #666;
  padding: 0 5px;
}
.deliverySetting .deliverySetting-table .table-body p {
  line-height: 30px;
}
.deliverySetting .deliverySetting-btn {
  /*width: 100%;*/
  height: 59px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  top: -55px;
  right: -16px;
  z-index: 100;
}
.deliverySetting .deliverySetting-btn .tabs-btn {
  min-width: 90px;
  height: 34px;
  line-height: 32px;
  padding: 0 10px;
  color: #2387f7;
  border: solid 1px #4fa2ff;
  background-color: #e7f2ff;
  cursor: pointer;
}
.deliverySetting .deliverySetting-btn .tabs-btn:nth-of-type(2) {
  margin: 0 15px;
}
.deliverySetting .deliverySetting-btn .tabs-btn input {
  border: none;
  background: transparent;
  color: inherit;
  cursor: inherit;
  outline: none;
  margin: 0;
  padding: 0;
}
.deliverySetting .deliverySetting-btn .tabs-btn:hover {
  color: #fff;
  background-color: #2387f7;
}
.deliverySetting .setDistributorDailog .el-input {
  width: 270px;
}
</style>

[转载]原文链接:https://segmentfault.com/a/1190000017873784

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50903.html

文章标题:多级checkbox关联选择(权限管理)

相关文章
javascript使用shift+click实现选择和反选checkbox的方法
本文实例讲述了javascript使用shift+click实现选择和反选checkbox的方法。分享给大家供大家参考。具体实现方法如下: var lastChecked = null; var handleChecked = functi...
2017-03-23
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
本文实例讲述了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;...
2017-03-23
javascript基于DOM实现权限选择实例分析
本文实例讲述了javascript基于DOM实现权限选择的方法。分享给大家供大家参考。具体实现方法如下: &lt;html xmlns=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xht...
2017-03-23
JavaScript实现单击下拉框选择直接跳转页面的方法
本文实例讲述了JavaScript实现单击下拉框选择直接跳转页面的方法。分享给大家供大家参考。具体实现方法如下: &lt;script type=&quot;text&#x2F;JavaScript&quot;&gt; &lt;!-- fu...
2017-03-27
Bootstrap3多级下拉菜单
本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下 效果图: 需要引用bootstrap.min.css和bootstrap.min.css.js 代码如下 &lt;head&gt; &lt;meta...
2017-03-15
js实现仿百度汽车频道选择汽车图片展示实例
本文实例讲述了js实现仿百度汽车频道选择汽车图片展示的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x2F;DTD XHTML ...
2017-03-23
javascript实现点击商品列表checkbox实时统计金额的方法
本文实例讲述了javascript实现点击商品列表checkbox实时统计金额的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html PUBLIC &quot;-&#x2F;&#x2F;W3C&#x2F;&#x...
2017-03-23
IoT实时数据可视化方案(进阶版):Worldmap Panel使用详解及使用Node-RED进行流程管理
Chap.1 万万没想到,我这一世英名葬送在了地图坑里 继上次搭建完框架得到了个粗糙的demo以后,我天真地以为我离真理的距离简直就只有一步之遥了。基本的图形组件试了个遍没什么。   想着我还有些模拟的地理数据没有做可视化,数据信息的内容放...
2018-01-03
js实现适用于素材网站的黑色多级菜单导航条效果
本文实例讲述了js实现适用于素材网站的黑色多级菜单导航条效果。分享给大家供大家参考。具体如下: 这是一款适用于素材网站的黑色多级菜单导航条,无需jQuery,采用CSS+javaScript来实现,整体效果非常棒,用来学习CSS也是很不错的...
2017-03-29
JavaScript实现选择框按比例拖拉缩放的方法
本文实例讲述了JavaScript实现选择框按比例拖拉缩放的方法。分享给大家供大家参考。具体如下: 这里通过javascript实现可以像PS一样拉出一个选择框的效果。里面的很多方法都是我们值得学习的。 运行效果如下图所示: 具体代码如下...
2017-03-29
回到顶部