级联选择器
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}} </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>
