电网项目学到的知识点

级联选择器

element上的级联选择器 单选选择任意一级选项

<div class="block">
	<el-cascader v-model=""
		:options="options"
		:props="{ value: '',label: '', checkStrictly: true }"
		clearable>
	</el-cascader>
</div>

options:[{	
	value:'',
	lable:'',
	children:[]
}],

自动生成复选框 el-table里加

@selection-change="handleSelectionChange"  
<el-table-column type="selection" width="55"></el-table-column>

复选框选中事件

handleSelectionChange(val) {
        this.multipleSelection = val;
 },

新建、编辑、删除调接口方法

new(){
        var api = '/secureActivityPerson/alterStatus';
        var param = {
        };
        this.axios.post(api, JSON.stringify(param), {
          headers: {
            'Content-Type': 'application/json;charset=utf-8'
          }
        }).then((response) => {
          if (response.data.code == 200) {
            this.$message({
              type: 'success',
              message: '提示信息!'
            });
            this.lookUp();
          } else {
            this.$message.error(response.data.msg);
          }
        }).catch((error) => {
          console.log(error);
        });
      },


//提示信息还可以用

        this.$message({
          message: "。。。",
          type: "warning"
        });

循环出来的数据上每个都有详情：

在需要添加详情的那列里+

<template slot-scope="scope">
                <el-button @click="lookPerson(scope.row)" type="text" size="mini" class="m_t_btn">{{scope.row.title}}
                </el-button>
</template>

在方法里写这个方法

打开页面查询数据库渲染页面（table样式的）

//~~~~~~~~~tableData后台获取的数据是数组格式~~~~~~~~~~~~~
 <el-table size="mini" ref="multipleTable" :data="tableData" id="recordId" tooltip-effect="dark"
                    style="width: 96%" class="m_t" v-loading="loading" @selection-change="handleSelectionChange"
                    :header-cell-style="{background:'rgb(235,242,241)'}">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column  prop="title" label="活动主题" show-overflow-tooltip>
      //~~~~~~~~~~添加详情~~~~~~~~~~~~~~~~
         <template slot-scope="scope">  
            <el-button @click="lookPerson(scope.row)" type="text" size="mini" class="m_t_btn">{{scope.row.title}}
            </el-button>
         </template>
         //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      </el-table-column>
      <el-table-column prop="participantsList" label="参加人员" show-overflow-tooltip>
      //~~~~~~~participantsList是tableData里的数组~~~~可以+模板渲染到页面上
         <template slot-scope="scope">
             <span v-for="(item,index) in scope.row.participantsList" :key="index">{{item.name}}&nbsp;</span>
          </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" show-overflow-tooltip>
         <template slot-scope="scope">
             <el-button size="mini" class="m_status1" v-if="scope.row.status=='1' || scope.row.status=='2' || scope.row.status=='3'">审批中
             </el-button>
             <el-button size="mini" class="m_status3" v-else-if="scope.row.status=='0'">未提交</el-button>
             <el-button size="mini" class="m_status4" v-else>已完成</el-button>
         </template>
       </el-table-column>
</el-table>