qianlishi 3 years ago
parent 454999dd22
commit a13b2f240b

@ -37,6 +37,7 @@
"vue-json-editor": "^1.4.3",
"vue-router": "3.0.1",
"vue-ruler-tool": "^1.2.4",
"vue-superslide": "^0.1.1",
"vuedraggable": "^2.24.1",
"vuex": "3.0.1"
},
@ -96,4 +97,4 @@
"last 2 versions",
"not ie <= 8"
]
}
}

@ -31,6 +31,9 @@ import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);
import VueSuperSlide from 'vue-superslide'
Vue.use(VueSuperSlide)
// enable element zh-cn
Vue.use(ElementUI, { zhLocale })

@ -1,7 +1,206 @@
<template>
<div>表格</div>
<div>
<el-button
type="primary"
size="small"
icon="el-icon-plus"
plain
@click="handleAddClick"
>新增</el-button
>
<el-table :data="formData" style="width: 100%">
<el-table-column prop="name" label="名称" width="80" />
<el-table-column prop="key" label="key值" width="80" />
<!-- <el-table-column prop="width" label="宽度" width="80" /> -->
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button
@click="handleEditorClick(scope.$index, scope.row)"
type="text"
size="small"
>编辑</el-button
>
<el-button
type="text"
size="small"
@click="handleDeleteClick(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-dialog
title="新增"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-form :model="rowFormData" label-width="50px">
<el-form-item label="名称:">
<el-input
v-model="rowFormData['name']"
placeholder="请输入名称"
size="mini"
>
</el-input>
</el-form-item>
<el-form-item label="key值:">
<el-input
v-model="rowFormData['key']"
placeholder="请输入key值"
size="mini"
>
</el-input>
</el-form-item>
<!-- <el-form-item label="宽度:">
<el-input
v-model="rowFormData['width']"
placeholder="请输入宽度"
size="mini"
>
</el-input>
</el-form-item> -->
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogVisible = false"> </el-button>
<el-button size="mini" type="primary" @click="handleSaveClick"
> </el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
export default {};
export default {
model: {
prop: "formData",
event: "input"
},
props: {
formData: Array
},
data() {
return {
dialogVisible: false,
rowFormData: {
name: "",
key: "",
width: ""
},
flag: true, // true false
indexEditor: -1, //
tableData: [
{
date: "2016-05-02",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-04",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1517 弄",
zip: 200333
},
{
date: "2016-05-01",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1519 弄",
zip: 200333
},
{
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1516 弄",
zip: 200333
}
]
};
},
methods: {
//
handleAddClick() {
this.rowFormData = {};
this.flag = true;
this.dialogVisible = true;
},
//
handleEditorClick(index, row) {
this.flag = false;
this.rowFormData = this.deepClone(row);
this.indexEditor = index;
this.dialogVisible = true;
},
//
handleClose() {
this.dialogVisible = false;
},
//
handleSaveClick() {
if (this.flag) {
//
this.formData.push(this.rowFormData);
this.dialogVisible = false;
} else {
//
this.formData[this.indexEditor] = this.rowFormData;
this.$set(this.formData, this.indexEditor, this.rowFormData);
this.dialogVisible = false;
}
this.$emit("input", this.formData);
this.$emit("change", this.formData);
},
//
handleDeleteClick(index) {
this.formData.splice(index, 1);
this.$emit("input", this.formData);
this.$emit("change", this.formData);
}
}
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
/deep/::-webkit-scrollbar-track-piece {
background-color: transparent;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 0; //
height: 8px; //
}
//
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(144, 146, 152, 0.3);
}
/deep/.el-table,
/deep/.el-table__expanded-cell,
/deep/.el-table th,
/deep/.el-table tr {
background-color: transparent !important;
color: #859094 !important;
font-size: 12px !important;
}
/deep/.el-table td,
/deep/.el-table th.is-leaf {
border-bottom: none;
line-height: 26px;
}
/deep/.el-table tbody tr:hover {
background-color: #263445 !important;
}
/deep/.el-table tbody tr:hover > td {
background-color: #263445 !important;
}
/deep/.el-table::before {
height: 0;
}
</style>

@ -894,11 +894,210 @@ const widgetTools = [
placeholder: '',
value: '表格',
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{ code: 'center', name: '居中' },
{ code: 'left', name: '左对齐' },
{ code: 'right', name: '右对齐' },
],
value: 'center'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'fontSize',
required: false,
placeholder: '',
value: '16'
},
{
type: 'el-switch',
label: '开启滚动',
name: 'isRoll',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-number',
label: '滚动时间(毫秒)',
name: 'rollTime',
required: false,
placeholder: '',
value: 1000
},
{
type: 'el-input-number',
label: '滚动个数',
name: 'rollNumber',
required: false,
placeholder: '',
value: 1
},
{
type: 'el-switch',
label: '线条',
name: 'isLine',
required: false,
placeholder: '',
value: false
},
{
type: 'el-input-number',
label: '边框宽度',
name: 'borderWidth',
required: false,
placeholder: '',
value: 1
},
{
type: 'vue-color',
label: '边框颜色',
name: 'borderColor',
required: false,
placeholder: '',
value: '#fff'
},
[
{
name: '表头设置',
list: [
{
type: 'el-switch',
label: '表头显隐',
name: 'isHeader',
required: false,
placeholder: '',
value: true,
},
{
type: 'vue-color',
label: '表头颜色',
name: 'headColor',
require: false,
placeholder: '',
value: '#fff',
},
{
type: 'vue-color',
label: '表头背景',
name: 'headBackColor',
require: false,
placeholder: '',
value: '#0a73ff',
},
],
},
{
name: '表体设置',
list: [
{
type: 'vue-color',
label: '文字颜色',
name: 'bodyColor',
required: false,
placeholder: '',
value: '#fff',
},
{
type: 'vue-color',
label: '表格背景',
name: 'tableBgColor',
require: false,
placeholder: '',
value: '',
},
{
type: 'vue-color',
label: '奇行颜色',
name: 'oldColor',
require: false,
placeholder: '',
value: '#0a2732',
},
{
type: 'vue-color',
label: '偶行颜色',
name: 'eventColor',
required: false,
placeholder: '',
value: '#003b51'
}
],
},
],
{
type: 'dynamic-add-table',
label: '',
name: 'dynamicAddTable',
required: false,
placeholder: '',
value: [{name: '日期', key: 'date', width: 200},{name: '姓名', key: 'name', width: 200}, {name: '地址', key: 'address', width: '200'}]
}
],
data: [],
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-barchart',
value: '',
},
],
position: [
{
type: 'el-input-number',

@ -1,26 +1,192 @@
<template>
<div class="table">
<div class="table_header">
<div>序号</div>
<div>列1</div>
<div>列2</div>
<div>列3</div>
</div>
<div class="table_content">
<div class="table_item">
<div>1</div>
<div>我们是第一行</div>
<div :style="styleObj">
<superslide v-if="hackReset" :options="options" class="txtScroll-top">
<div class="title">
<div
v-for="(item, index) in header"
:style="headerTableStlye"
:key="index"
>
{{ item.name }}
</div>
</div>
</div>
<div class="bd">
<ul class="infoList">
<li v-for="(item, index) in list" :key="index">
<div
v-for="(itemChild, idx) in header"
:key="idx"
:style="[bodyTableStyle, bodyTable(index)]"
>
{{ item[itemChild.key] }}
</div>
</li>
</ul>
</div>
</superslide>
</div>
</template>
<script>
export default {
props: {
value: Object,
ispreview: Boolean
},
data() {
return {
list: [{ name: 123 }]
hackReset: true,
options: {
titCell: ".hd ul",
mainCell: ".bd ul",
effect: "topLoop",
autoPage: true,
effect: "top",
autoPlay: true,
vis: 5
},
header: [],
list: [],
optionsSetUp: {},
optionsPosition: {},
optionsData: {}
};
},
computed: {
styleObj() {
const allStyle = this.optionsPosition;
return {
position: this.ispreview ? "absolute" : "static",
width: allStyle.width + "px",
height: allStyle.height + "px",
left: allStyle.left + "px",
top: allStyle.top + "px"
};
},
headerTableStlye() {
const headStyle = this.optionsSetUp;
return {
"text-align": headStyle.textAlign,
"font-size": headStyle.fontSize + "px",
"border-style": headStyle.isLine ? "solid" : "none",
"border-width": headStyle.borderWidth + "px",
"border-color": headStyle.borderColor,
display: headStyle.isHeader ? "block" : "none",
color: headStyle.headColor,
"background-color": headStyle.headBackColor
};
},
bodyTableStyle() {
const bodyStyle = this.optionsSetUp;
return {
"text-align": bodyStyle.textAlign,
"font-size": bodyStyle.fontSize + "px",
"border-style": bodyStyle.isLine ? "solid" : "none",
"border-width": bodyStyle.borderWidth + "px",
"border-color": bodyStyle.borderColor,
color: bodyStyle.bodyColor,
"background-color": bodyStyle.tableBgColor
};
}
},
watch: {
value: {
handler(val) {
this.optionsSetUp = val.setup;
this.optionsPosition = val.position;
this.optionsData = val.data;
this.initData();
},
deep: true
}
},
mounted() {
this.optionsSetUp = this.value.setup;
this.optionsPosition = this.value.position;
this.optionsData = this.value.data;
this.initData();
},
methods: {
initData() {
this.handlerRollFn();
this.handlerHead();
this.handlerData();
},
handlerRollFn() {
const options = this.options;
const rollSet = this.optionsSetUp;
options.autoPlay = rollSet.isRoll;
options.delayTime = rollSet.rollTime;
options.scroll = rollSet.rollNumber;
this.options = options;
this.hackResetFun();
},
handlerHead() {
const head = this.optionsSetUp.dynamicAddTable;
this.header = head;
},
handlerData() {
const tableData = this.optionsData;
console.log(tableData);
tableData.dataType == "staticData"
? this.handlerStaticData(tableData.staticData)
: this.handlerDymaicData();
},
handlerStaticData(data) {
console.log(data);
this.list = data;
},
handlerDymaicData() {},
// vue hack
hackResetFun() {
this.hackReset = false;
this.$nextTick(() => {
this.hackReset = true;
});
},
//
bodyTable(index) {
if (index % 2) {
return {
"background-color": this.optionsSetUp.eventColor
};
} else {
return {
"background-color": this.optionsSetUp.oldColor
};
}
}
}
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
/* 本例子css */
.txtScroll-top {
overflow: hidden;
position: relative;
}
.title {
display: flex;
flex-direction: row;
width: 100%;
}
.title > div {
height: 50px;
line-height: 50px;
width: 100%;
}
.txtScroll-top .infoList li {
height: 50px;
line-height: 50px;
display: flex;
flex-direction: row;
}
.txtScroll-top .infoList li > div {
width: 100%;
}
.txtScroll-top .infoList li:nth-child(n) {
background: rgb(0, 59, 81);
}
.txtScroll-top .infoList li:nth-child(2n) {
background: rgb(10, 39, 50);
}
</style>

Loading…
Cancel
Save