<template>
<div class="elementWrap">
<!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
<el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
<div class="ele-item">
<label for="">单选框：</label>
<GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
@change="radioChange" :rules="rules.language" />
</div>
<div class="ele-item">
<label for="">下拉框：</label>
<GuipSelect width="600px" v-model="form.card" label="卡片" prop="card" :options="options"
defaultValue="选项1" />
</div>
<div>
<h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
<GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
<el-form>
<GuipTable :tableData="tableData" ref="multipleTable" @selectChange="handleSelectionChange"
:multiple="true" autoColumn="true" :loading="tableLoading">
<!-- <template slot="header"> -->
<el-table-column width="180">
<template slot="header">
<span>日期</span>
</template>
</el-table-column>
<!-- <el-table-column prop="type">
<template slot="header">
<GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions"
defaultValue="全部检测类型" @change="changeSelectType" />
</template>
<template slot-scope="scope">
{{ type2name[scope.row.type] }}
</template>
</el-table-column> -->
<el-table-column prop="created_at" label="时间" width="200">
<template slot-scope="scope">
<div class="flex cell_render">
<GuipToolTip content="文字居中">
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
scope.row.payment
==
'0' ? '文字居中' : '文字居中' }}</span>
</GuipToolTip>
<GuipToolTip content="图标居中">
<svg-icon :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" />
</GuipToolTip>
</div>
</template>
</el-table-column>
<el-table-column prop="unit_num" label="数量" width="180">
<template slot-scope="scope">
<GuipToolTip content="单元格局中">
<div class="flex">
<span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
scope.row.payment
==
'0' ? '单元格局中' : '单元格局中' }}</span>
<svg-icon :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" />
</div>
</GuipToolTip>
</template>
</el-table-column>
<el-table-column prop="name2" label="姓名" width="150"></el-table-column>
<el-table-column prop="price" label="价格" width="150">
<!-- <template slot-scope="scope">
<span @click="handlePriceClick(scope.row)">{{ scope.row.price }}</span>
</template> -->
<!-- 气泡弹出框 后期样式自定义-->
<!-- <template slot-scope="scope">
<el-popover trigger="click" placement="top">
<input type="text">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.price }}</el-tag>
</div>
</el-popover>
</template> -->
</el-table-column>
<el-table-column prop="address" label="地址" width="200"> </el-table-column>
<el-table-column prop="address1" label="地址测试"></el-table-column>
<el-table-column prop="price2" label="价格" width="300">
<!-- 自定义渲染内容 -->
<template slot-scope="scope">
<GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card"
prop="card" :options="options" defaultValue="选项1" />
</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed>
<template slot-scope="scope">
<div class="flex">
<el-button @click="handleClick(scope.row)" type="text">查看</el-button>
<el-button type="text">编辑</el-button>
</div>
</template>
</el-table-column>
<!-- </template> -->
</GuipTable>
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
:total="total">
</el-pagination>
</el-form>
</div>
<div>
<h3 for="">表格(带气泡框),内容自定义：</h3>
<el-form>
<GuipTable :tableData="tableData2" :key="random()" ref="multipleTable"
@selectChange="handleSelectionChange" :multiple="true" autoColumn="true" width="900px"
:columns="columns" @confirm="onConfirm" @cancel="onCancel">
<!-- 自定义姓名列的气泡框内容 -->
<template #popover-content-name="{ row, column }">
<div>
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="排序"
:prop="column.label" placeholder="这是" />
</div>
</template>
<template #popover-content-age="{ row, column }">
<GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="年龄"
:prop="column.label" placeholder="这是" unit="岁">
</GuipInput>
</template>
<!-- 自定义地址列的气泡框内容 -->
<template #popover-content-address="{ row, column }">
<div>
<p>自定义内容：{{ column.label }}</p>
<el-select v-model="row[`edit_${column.prop}`]" placeholder="请选择">
<el-option label="北京市" value="北京市" />
<el-option label="上海市" value="上海市" />
<el-option label="广州市" value="广州市" />
</el-select>
</div>
</template>
</GuipTable>
</el-form>
</div>
<div class="ele-item">
<label for="">文本域：</label>
<GuipTextarea disabled :styleObject="styleObject" />
</div>
<div class="ele-item">
<label for="">输入框：</label>
<GuipInput ref="GuipInput" width="200px" height="30px" disabled placeholder="这是自定义默认提示语" />
<div style="width: 20px;height: 10px;"></div>
<GuipInput ref="GuipInput" :styleObject="styleObject1" defaultValue="爱吃麻辣烫" :maxlength="100"
@change="handleInput" @blur="handleInput" @input="handleInput" @focus="handleInput"
placeholder="这是自定义默认提示语" />
<div style="width: 20px;height: 10px;"></div>
<GuipInput :defaultValue="defaultValue" @clear="handleClear" width="400px">
<span slot="prependshow">http:</span>
<img slot="prefix" src="../assets/radio_checked.svg" alt="">
<!-- 输入框后面小图标 -事件自定义 -->
<i slot="suffix" class="el-icon-close" @click="handleClear"></i>
<!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
<!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
<span slot="appendshow">.checkcopy.com</span>
</GuipInput>
<!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
</div>
<div class="ele-item">
<label for="">单选框：</label>
<el-radio v-model="radio1" :label="1">选项一</el-radio>
<el-radio v-model="radio1" :label="2">选项二</el-radio>
</div>
<div class="ele-item">
<label for="">单选框组：</label>
<el-radio-group v-model="radio" @input="radioChange">
<el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
</div>
<div class="ele-item">
<label for="">按钮尺寸：</label>
<GuipButton size="superBig">加盟并进入后台</GuipButton>
<GuipButton size="big">准备完毕，验证自有域名</GuipButton>
<GuipButton size="page">下一步</GuipButton>
<GuipButton size="primary">保存</GuipButton>
<GuipButton size="table">新增站点</GuipButton>
<GuipButton size="form">前往添加</GuipButton>
</div>
<div class="ele-item">
<label for="">强按钮：</label>
<!-- 默认 type= primary normal 样式 -->
<GuipButton>默认</GuipButton>
<GuipButton loading>按钮</GuipButton>
<GuipButton disabled>按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">弱按钮：</label>
<GuipButton type="ignore">按钮</GuipButton>
<GuipButton type="ignore" loading>按钮</GuipButton>
<GuipButton type="ignore" disabled>按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">中按钮：</label>
<GuipButton type="system">按钮</GuipButton>
<GuipButton type="system" loading>按钮</GuipButton>
<GuipButton type="system" disabled>按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">文字按钮：</label>
<GuipButton type="text" >强引导</GuipButton>
<GuipButton type="grey" >弱引导</GuipButton>
</div>
<div class="ele-item">
<label for="">独特按钮：</label>
<hover-button button-text="上传文件" :default-icon="require('../assets/upLoad_grey.svg')"
:hover-icon="require('../assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF" @click="btnClick" />
</div>
<div class="ele-item">
<label for="">独特按钮单独写样式：</label>
<div class="btn1">创建首个网站</div>
</div>
<!-- 暂时废弃 -->
<!-- <div class="ele-item">
<label for="">常规按钮：</label>
<GuipButton>默认按钮</GuipButton>
<GuipButton type="mild" size="medium">轻度按钮</GuipButton>
<GuipButton type="primary">按钮</GuipButton>
<GuipButton type="reverseMild">按钮</GuipButton>
<GuipButton type="primary" loading>按钮</GuipButton>
<GuipButton type="success" :plain="plain">按钮</GuipButton>
<GuipButton type="info" :plain="plain">按钮</GuipButton>
<GuipButton type="warning" :plain="plain">按钮</GuipButton>
<GuipButton type="danger" :plain="plain">按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">禁用按钮：</label>
<GuipButton disabled>默认按钮</GuipButton>
<GuipButton type="mild" disabled size="medium">轻度按钮</GuipButton>
<GuipButton type="reverseMild" disabled>按钮</GuipButton>
<GuipButton type="primary" size="medium" disabled>按钮</GuipButton>
<GuipButton type="success" disabled>按钮</GuipButton>
<GuipButton type="info" disabled>按钮</GuipButton>
<GuipButton type="warning" disabled>按钮</GuipButton>
<GuipButton type="danger" disabled>按钮</GuipButton>
</div>
<div class="ele-item">
<label for="">三种尺寸按钮：</label>
<GuipButton type="primary">默认按钮</GuipButton>
<GuipButton type="primary" size="medium">中等按钮</GuipButton>
<GuipButton type="primary" size="small">小的按钮</GuipButton>
<GuipButton type="primary" size="mini">迷你按钮</GuipButton>
</div> -->
<div class="ele-item">
<label for="">自定义宽高按钮：</label>
<GuipButton type="primary" :btnstyle="btnstyleObj">宽高自定义</GuipButton>
</div>
<div style="width: 600px;">
<h3>表单左右布局（直接使用封装好的input）</h3>
<!-- 表单左右布局 -->
<GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username" prop="username"
:rules="usernameRules" placeholder="这是自定义默认提11示语" />
</div>
<div style="width: 800px;height: 150px;">
<h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
<GuipInput ref="GuipInput" column="column" addClass="w510" label="age" desc="这是是右侧文案" v-model="form.age"
prop="age" placeholder="这是自定义默认提示语" />
</div>
<div class="ele-item">
<label for="">开关L</label>
<GuipSwitch v-model="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
</GuipSwitch>
</div>
<el-button type="primary" @click="submitForm">Submit</el-button>
</el-form>
<div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;">
--------------------分割线0------------------------------</div>
<div style="display: flex;" class="ele-item">
<label for="">日期选择器</label>
<el-date-picker v-model="date1" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div ref="ScaleBox" class="ScaleBox">
<!-- Form 组件-->
<!-- @headdenForm="headdenForm" -->
<!-- @changeSelect="changeSelect" -->
<!-- <GuipForm
:fromItem="fromItem"
:formNewList="formList"
:detail="edit"
:disabled="edit"
ref="VabForm"
/>
<div class="cardfooter" style="display: flex;">
<el-button @click="cancellation">取消</el-button>
<el-button @click="save" type="primary">保存</el-button>
</div> -->
</div>
<div class="flex ele-item">
<label for="">一些功能集合</label>
<GuipButton type="primary" @click="openDialog">打开弹框</GuipButton>
<GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
</div>
<div class="flex ele-item">
<label for="">提示信息</label>
<GuipToolTip content="这是一个提示">
<GuipButton type="primary" size="page">悬停查看提示</GuipButton>
</GuipToolTip>
<GuipToolTip placement="bottom" effect="light">
<GuipButton type="primary" size="page">自定义提示内容</GuipButton>
<template #content>
<div style="max-width: 200px">
<h4>自定义标题</h4>
<p>这里可以放任何HTML内容</p>
<el-button size="mini">甚至按钮</el-button>
</div>
</template>
</GuipToolTip>
<GuipToolTip placement="bottom" effect="light" content="点击进入编辑">
<svg-icon :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
:hoverColor="'#006AFF'" />
</GuipToolTip>
</div>
<GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
@dialogVisibleChange="dialogVisibleChange">
<!-- 自定义内容 -->
<div>
<p>这是一个自定义内容的弹框。</p>
</div>
</GuipDialog>
</div>
</template>
<script>
import { rules } from "../assets/vabForm";
// @ is an alias to /src
import GuipSwitch from '@/components/GuipSwitch.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipRadio from '@/components/GuipRadio.vue';
import GuipButton from '@/components/GuipButton.vue';
import GuipInput from '@/components/GuipInput.vue';
import GuipSelect from '@/components/GuipSelect.vue';
import GuipTable from '@/components/GuipTable.vue';
import GuipTextarea from '@/components/GuipTextarea.vue'
import GuipToolTip from '@/components/GuipToolTip.vue'
import HoverButton from '@/components/HoverButton.vue'
import SvgIcon from '@/components/SvgIcon.vue';
// import { mapState } from 'vuex'
// import store from '@/store';
export default {
name: 'HomeView',
components: {
GuipTextarea,
GuipTable,
GuipSwitch,
GuipDialog,
GuipRadio,
GuipButton,
GuipInput,
GuipSelect,
GuipToolTip,
HoverButton,
SvgIcon
},
data() {
return {
currentPage: 1, //当前页
pageSize: 5, //每页的容量
total: 0, //列表总数
tableLoading: false,
timer: null,
date1: '',
switchValue: true,
dialogVisible: false,//是否展示弹框
showCancelButton: true, // 控制是否显示取消按钮
showCloseButton: true, // 控制是否显示关闭按钮
form: {
username: '',
language: '',
},
languageOptions: [
{ label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh' },
{ label: 'Python', value: 'py', selectedLabel: 'JavaScripthhhhhhhhhh' },
{ label: 'Java', value: 'java', disabled: true, selectedLabel: 'JavaScripthhhhhhhhhh' }, // 禁用选项
{ label: 'Go', value: 'go', selectedLabel: 'JavaScripthhhhhhhhhh' },
],
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
card: [
{ required: true, message: '请选择有效信息', trigger: 'blur' }
],
language: [
{ required: true, message: '请选择语言', trigger: 'blur' },
],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' }
]
},
usernameRules: [{ required: true, message: 'Username is required', trigger: 'blur' }],//单独自定义rules
msg: "测试",
title: "相关附件",
edit: false,
action: true,
header: false,
width: 1920,
height: 1080,
dataList: [
{ name: "张三", age: 19, id: 1 },
{ name: "李四", age: 20, id: 2 },
],
formList: [],
// 模拟数据 详细 测试
fromItem: {
id: "Shanghai",
id1: "选项4",
name: "用户名",
radioId: "2",
checkboxId: ["上海", "北京"],
textareaIner: "textarea",
dateTime: "2023-09-12 00:00:00",
uploadList: [
{
name: "小梨猫.jpg",
size: 160517,
uid: 1695291434025,
url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
},
],
},
// 表格数据
tableData2: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
price: '20',
age: 20,
// 在支持修改的项目中，需要主动保留一份原始数据
edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎11',
address: '上海市普陀区金沙江路 151811 弄',
price: '10',
age: 30,
edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
price: '200',
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
// 表格列配置
columns: [
{ prop: 'name', label: '姓名（带气泡）', popover: true }, // 支持气泡框
{ prop: 'age', label: '年龄', popover: true }, // 不支持气泡框
{ prop: 'address', label: '地址（带气泡）', popover: true }, // 支持气泡框
],
optionss: [
{
value: "选项1",
label: "黄金糕",
},
{
value: "选项2",
label: "双皮奶",
},
{
value: "选项3",
label: "蚵仔煎",
},
{
value: "选项4",
label: "龙须面",
},
{
value: "选项5",
label: "北京烤鸭",
},
],
cities: [
{
value: "Beijing",
label: "北京",
},
{
value: "Shanghai",
label: "上海",
},
{
value: "Nanjing",
label: "南京",
},
{
value: "Chengdu",
label: "成都",
},
{
value: "Shenzhen",
label: "深圳",
},
{
value: "Guangzhou",
label: "广州",
}
],
tableData:[],
input: 'hahhahah',
defaultValue: 'asdasda',
radio: 3,
radio1: 5,
btnstyleObj: {
width: '388px',
height: '46px',
borderRadius: '4px',
background: '#006AFF',
},
btnstyleObj1: {
width: '247px',
height: '46px',
borderRadius: '4px',
},
styleObject: {
width: '200px',
height: '40px'
},
styleObject1: {
width: '600px',
height: '50px'
},
plain: false,
options: [{
value: '选项1',
label1: '黄金hhhhhh',
label: '黄金糕'
}, {
value: '选项2',
label1: '双皮奶hhhhhhhhh',
label: '双皮奶'
}, {
value: '选项3',
label1: '蚵仔煎hhhhhhhhh',
label: '蚵仔煎'
}, {
value: '选项4',
label1: '双皮奶hhhhhhhhh',
label: '龙须面'
}, {
value: '选项5',
label1: '双皮奶hhhhhhhhh',
label: '北京烤鸭'
}],
}
},
mounted() {
this.getList();
this.getStagePurchase()
// this.$loadingFn.show()
// setInterval(()=>{
// this.$loadingFn.hide()
// },70000)
// this.timer = setTimeout(() => {
// this.$store.dispatch('hideLoading')
// }, 2000)
// this.timer = null;
},
methods: {
showTooltip() {
this.$refs.tooltip.show()
},
hideTooltip() {
this.$refs.tooltip.hide()
},
handleSizeChange(val) {
this.pageSize = val
this.getStagePurchase()
},
handleCurrentChange(val) {
this.currentPage = val
this.getStagePurchase()
},
getStagePurchase() {
this.tableLoading = true
const that = this
that.tableData = []
this.$http('POST', '/supernew/ajax_get_stage_purchase', {
type: 0,
cur_page: 1,
page_size: 5,
},{
headers:{
'AUTH': '3c901fa4a19a7ad9d01238890863d499'
}
}).then(response => {
this.tableLoading = false
this.$nextTick(() => {
that.tableData = response.data.list
console.log(that.tableData,'---that.tableData');
// that.type2name = response.data.type2name
that.total = response.data.total
})
}).catch(error => {
console.error(error, 'error')
})
},
btnClick() {
},
openLoading() {
this.$store.dispatch('showLoading')
setTimeout(() => {
this.$store.dispatch('hideLoading')
}, 2000)
},
handleFilter(column) {
// 在这里处理筛选逻辑
console.log('筛选列:', column);
},
// 部分情况可能导致页面不更新，增加 key 强制重新渲染
random() {
var randomNumber = Math.random();
return randomNumber
},
onSwitchChange(value) {
console.log('Switch 状态变化:', this.switchValue, value);
},
// 弹框相关方法---start
openDialog() {
this.dialogVisible = true;
},
// 确认按钮事件
handleConfirm() {
this.$message.success('点击了确认按钮');
this.dialogVisible = false;
},
// 取消按钮事件
handleCancel() {
this.$message.warning('点击了取消按钮');
this.dialogVisible = false;
},
// 关闭弹框事件
handleClose() {
this.$message.info('弹框已关闭');
this.dialogVisible = false;
},
dialogVisibleChange(data) {
console.log(data, 'data098908090');
},
// 弹框相关方法---end
// 选择表格某一项 点击
handlePriceClick(row) {
this.currentRow = row;
this.editedPrice = row.price;
this.dialogVisible = true;
},
// 表格气泡框-----
// 确认事件
onConfirm(row, prop) {
console.log('确认修改:', row, prop);
this.$message.success('修改成功');
this.$set(this.tableData, row)
console.log(this.tableData, 'this.tableData=====');
},
// 取消事件
onCancel(row, prop) {
console.log('取消修改:', row, prop);
this.$message.info('已取消');
this.$set(this.tableData, row)
},
// 表格气泡框-----
// 监听单选框组变化
radioChange(data) {
console.log(data, 'radio--data');
},
handleClick(row) {
console.log(row);
},
submitForm() {
this.$refs.formRef.validate((valid) => {
console.log(this.form, '======formxinxi');
if (valid) {
alert('提交成功!');
} else {
return false;
}
});
},
// 重置表单
resetForm() {
this.$refs.form.resetFields();
},
triggerError() {
this.$refs.formRef.validateField('username', (error) => {
if (error) {
console.log('错误信息:', error);
} else {
console.log('无错误');
}
});
},
getFormdata() {
console.log(this.$refs.GuipInput.value);
},
handleInput(value) {
console.log(value, 'value===输入框输入得知');
},
handleClear(value) {
this.defaultValue = '这是我清除后给的文案'
// this.handleInput('')
console.log(value, 'value===qinghcu');
},
getList() {
console.log('zhixingle--');
const dataList = rules();
dataList.forEach((item) => {
if (item.field === "id") {
item.options = this.cities;
}
if (item.field === "id1") {
item.options = this.optionss;
}
});
this.formList = dataList;
},
save() {
this.$refs.VabForm.submitForm("ruleForm");
},
//取消
cancellation() {
this.$refs.VabForm.resetForm("ruleForm");
},
// 表格点击、选择
handleSelectionChange(data) {
// 多选模式下的时候 data 为数组格式
// 单选的时候是 对象
console.log(data, '表格行信息');
},
// 全选按钮
toggleAllSelection() {
// console.log(this.$refs.multipleTable,'this.$refs.multipleTable');
this.$refs.multipleTable.$refs.guiptable.toggleAllSelection();
},
},
beforeDestroy() {
if (this.timer) {
clearTimeout(this.timer)
// 确保离开组件时关闭 loading
this.$store.dispatch('hideContentLoading')
}
}
}
</script>
<style lang="scss" scoped>
.elementWrap {
/* width: 100%; */
padding: 30px 40px;
background: #fff;
.ele-item {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 20px 0 30px;
label {
font-size: 16px;
font-weight: bold;
width: 100px;
margin-right: 10px;
text-align: left;
}
}
}
.ScaleBox {
width: 1000px;
background-size: 100% 100%;
-ms-transition: 0.3s;
transition: 0.3s;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
margin: 0 auto;
}
.cardfooter {
width: 100%;
bottom: 20px;
right: 30px;
text-align: right;
justify-content: center;
}
.btn1 {
cursor: pointer;
font-weight: bold;
width: 114px;
height: 40px;
/* 自动布局 */
display: flex;
align-items: center;
padding: 11px 12px;
box-sizing: border-box;
color: #FFFFFF;
border-radius: 4px;
transition: all .3s;
background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
&:hover {
opacity: 0.7;
background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
}
}
</style>