- <span style="font-family:Microsoft YaHei;font-size:12px;"><strong><style>
- .relatedInstance>h2 {
- margin-top: 0;
- font-size: 20px;
- color: #999;
- }
- .display{
- display: none;
- }
- .relatedInstance ul {
- padding: 0;
- }
- .relatedInstance>ul>li {
- margin-bottom: 20px;
- }
- .relatedInstance>ul>li>h3 {
- background: #f3f2f0;
- color: #6bacdf;
- font-size: 14px;
- text-align: center;
- line-height: 26px;
- }
- .relatedInstance>ul>li>h5 {
- font-size: 14px;
- text-align: center;
- line-height: 20px;
- display:none;
- cursor: pointer;
- }
- .relatedInstance>ul>li>ul>li {
- padding-left:28px;
- overflow: hidden;
- width: 100%;
- font-size: 14px;
- color: #999;
- line-height: 20px;
- min-height: 20px;
- text-decoration: underline;
- cursor:pointer;
- margin:5px 0;
- }
- .relatedInstance>ul>li>ul>li {
- word-wrap: break-word;
- }
- .relatedInstance li h3{
- cursor:pointer;
- }
- .relatedInstance li h3 span{
- float:right;
- line-height:26px;
- margin-right:5px;
- }
- .relatedInstance li li:hover{
- color:#333;
- }
- .relatedInstance li ul{
- overflow:hidden;
- }
- .relatedInstance li h3{
- position:relative;
- }
- .relatedInstance li li{
- position: relative;
- }
- .relatedInstance li h3 b, .relatedInstance li li b {
- position: absolute;
- top: 1px;
- left: 5px;
- vertical-align: middle;
- margin: 0;
- padding: 0;
- width: 18px;
- height: 18px;
- background: url(../assets/blue.png);
- border: none;
- cursor: pointer;
- background-position: 0 0;
- margin-right: 5px;
- }
- .relatedInstance li h3 b {
- position: absolute;
- top: 4px;
- }
- .relatedInstance li h3 b:hover, .relatedInstance li li b:hover {
- background-position: -20px 0;
- }
- .relatedInstance li h3 b.checked, .relatedInstance li li b.checked {
- background-position: -40px 0;
- }
- </style>
- <template>
- <p class="row">
- <p class="col-sm-3">
- <p class="relatedInstance">
- <h2>相关实体</h2>
- <ul>
- <li id="" v-for="(entity,index) in entities" @click="handleTit(index)">
- <h3>{{entity.text}}<b :class="{'checked':allState[index]}" @click.stop="handleTitAll(index)"></b>
- <span :class="[entity.isShow?'glyphicon-minus':'glyphicon-plus']" class="glyphicon"></span></h3>
- <ul v-show="entitiesState[index]" @click.stop>
- <li v-for="(list,listIndex) in entity.child" @click="childHandle(listIndex,index)">
- <b :class="{'checked':childState[index][listIndex]}"></b><span>{{list.text}}</span>
- <span>(630)</span>
- </li>
- </ul>
- <h5 v-show="" class="more" data-pages="1"><p>更多</p></h5>
- </li>
- </ul>
- </p>
- </p>
- </p>
- </template>
- <script>
- export default {
- data(){
- return{
- entities:[
- {text:'人员',child:[{text:'111111'},{text:'222222'}]},
- {text:'项目',child:[{text:'111111'},{text:'222222'}]},
- {text:'机构',child:[{text:'111111'},{text:'222222'}]},
- ],
- entitiesState:[],
- childState:[],
- allState:[],
- listLen:0
- // isShow: false,
- // isChecked:false,
- // isChosed:false,
- }
- },
- methods:{
- handleTit(i){
- let state=this.entitiesState;
- this.$set(state,i,!state[i]);
- },
- childHandle(i,pi){
- let child=this.childState;
- if(child[pi][i]) this.allState[pi]=false;
- this.$set(child[pi],i,!child[pi][i]);
- if(this.childState[pi][i]) this.checkList(this.childState[pi],pi);
- },
- handleTitAll(pi){
- let child=this.childState[pi],
- allState=this.allState;
- for(let i=0;i<this.listLen;i++){
- this.$set(child,i,!allState[pi]);
- }
- this.$set(allState,pi,!allState[pi]);
- },
- checkList(child,pi){
- let allState=this.allState,
- len=this.entities[pi].child.length;
- for(let i=0;i<len;i++){
- if(!child[i]) return;
- }
- this.$set(allState,pi,true);
- }
- },
- created(){
- let len=this.entities.length;
- this.listLen=len;
- for(let i=0;i<len;i++){
- this.$set(this.childState,i,[])
- }
- }
- }
- </script>
- </strong></span>
来源: https://www.2cto.com/kf/201709/685313.html