mform的使用方法如下：{
<m-form
:formData="searchFormData"
:columns="formColumns" 数据存放在这里显示在表单中
label-width="110px"
@inputEnter="queryTableListBySome"
@keyup.enter="getList(true)"
ref="form"
v-if="['add','edit'].includes(dialogType)"
:disabled="disabled"(思域星球中componentEdit使用)
>
</m-form>
data () {
return {
serachFormData: {
pageIndex: 15,
pageSize: 1
},
adminListOne: [
{ label: 'admin-gruop', value: 0 },
{ label: '统计定时任务', value: 1 },
{ label: '增加top api调用量', value: 2 },
{ label: 'CRM系统', value: 3 },
{ label: 'remind服务相关定时', value: 4 }
]
}
}
computed: {
formColumns () {
return [{
label: '执行器',
el: 'mSelect',
dataList: this.adminListOne,
span: 6,
labelWidth: '58px'
}
}
}
@keyup.enter="getList(true)"当前输入框在键盘敲下回车时执行getList函数。
keyup.enter的使用{
<label>你所在城市：</label><input type="text" v-on:keyup.enter="City"/>
<label>你所在公司：</label><input type="text" v-on:keyup.enter="Company"/>
City: function(){
alert("你正在输入你所在的城市！");
},
Company: function(){
alert("你正在输入你所在的公司！");
}
}
mTable的使用方法：
<m-table
ref="integralTable" 标记此table
:table-data="tableData" 列表数据
:columns="tableColumns" 遍历数据
:stripe="false" 斑马纹 table
:showNum="false" 显示底部数字
:border="false" 纵向边框
:total="total"
:page="formData"
:class="canSelectAll"
:selectable="assignSelectAble"
v-loading="tableLoading"
selection
reserveSelection
row-key="id"
@select="selectionChange"
@select-all="selectionAllChange"
@filterChange="filterChange"
@pageChange="queryTableListBySome(true)"
@selectionChange='selectionChange'
@sort-change="sortChange"
>
</m-table>
data () {
return {
tableData: [],
tableLoading: false,
total: 1,
}
}
computed: {
tableColumns () {
return [
{ label: '任务ID', prop: 'id' }, label为标签名，prop为接口名
{ label: '任务描述', prop: 'jobDesc' }
]
}
}
el-dialog的使用方法：
:title="dialogTitle"
title 对应的标题 可动态绑定 在return内传递值
:visible.sync="dialogShow"
dialogShow 对应的是否显示 当对应的a为false，则弹出框消失
{
:width="componentData.mediaType === 'news' ? '1000px' : '890px'"
width="50%"
} 对应弹出框的宽度（相比较于页面的宽度）
:close-on-click-modal="false" 可以通过点击弹窗框外区域取消弹框
@close="close" Dialog 关闭的回调 如图一
<!-- 内容主题 -->
<m-form ref="dialogFrom" :formData="dialogFormData" :columns="dialogColumns">
</m-form>
<span slot="footer" class="dialog-footer">
<!-- 两个按钮 -->
<el-button type="primary" @click="dialogSure">保 存</el-button>
<el-button type="primary" @click="dialogShow = false">取 消</el-button>
</span>
}
图一如下
el-button的使用方法：
slot="reference"
:disabled="disabled" 禁用状态
type="text" 是否为文本
style="margin:0 10px;" 样式
size="mini" 按钮大小
@click="saveHandle" 思域星球中followedReply页面的方法
plain 朴素按钮，无颜色
v-if="scope.row.status !== 200" 是否显示按钮
onClick={() => this.editInit()}
data () {
return {
disabled: false
}
}
el-link：
style="margin-bottom: 20px" 样式
@click="downloadTemplate" 点击触发方法
type="primary" 类型
v-if="row.taskState === 1" 是否显示
:underline="false" 下划线
el-divider：
<el-divider direction="vertical"> direction重定向
</el-divider> 分割线
