+ 
+
+
+
+
+
-
-
-
+
+ {{ scope.row.price }}元
+
-
-
+
+
+
-
-
-
+
+
+
+
+
+
+ 全选按钮
+
+
+
-
+
表格：(表头自定义、自定义渲染、固定列)
+
@@ -40,11 +30,11 @@
{{
scope.row.payment
==
- '0' ? '文字居中' : '文字居中' }}
+ '0' ? '文字居中' : '文字居中' }}
-
@@ -57,35 +47,26 @@
{{
scope.row.payment
==
- '0' ? '单元格局中' : '单元格局中' }}
-
-
-
+ Submit
+
+
+
表格(带气泡框),内容自定义：
-
+
+
-
-
-
-
-
-
- 表格(带气泡框),内容自定义：
+ 点击一下跳转参照页面 + +
-
- 自定义内容：{{ column.label }}
@@ -136,253 +115,228 @@
-
-
-
-
-
-
-
- http:
- 
-
-
-
-
-
-
-
-
- .checkcopy.com
-
-
-
-
-
-
-
-
-
-
-
-
- .checkcopy.com
-
-
- 选项一
- 选项二
+ -->
+
+
+
+
+
+
+
+
+
+
+
+
+ http:
+
+
+
+
+
+
+
+
+
+ .checkcopy.com
+
+
+
+
+
+ 选项一
+ 选项二
+
+
+
+
+
+ 备选项
+ 备选项
+ 备选项
+
+
+
+
+ 加盟并进入后台
+ 准备完毕，验证自有域名
+ 下一步
+ 保存
+ 新增站点
+ 前往添加
+
+
+
+
+ 默认
+ 按钮
+ 按钮
+
+
+
+ 按钮
+ 按钮
+ 按钮
+
+
+
+ 按钮
+ 按钮
+ 按钮
+
+
+
+ 强引导
+ 弱引导
+
+
+
+
+
+
+
+
+
+ 创建首个网站
+
+
+ 宽高自定义
+
+
+
+
+ 成功提示
+ 失败提示
+ 警告提示
+
+
+
+
+
+ 表单左右布局（直接使用封装好的input）
+ +
+
+
+ 表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)
+
+
+
+
+
+
+ --------------------分割线0------------------------------
+
+
+
+
+
-
-
-
- 备选项
- 备选项
- 备选项
-
+
+
+
+
+
-
-
- 加盟并进入后台
- 准备完毕，验证自有域名
- 下一步
- 保存
- 新增站点
- 前往添加
+
+
+ 打开弹框
+ 展示加载动画 2s
-
-
-
- 默认
- 按钮
- 按钮
-
-
-
- 按钮
- 按钮
- 按钮
-
-
-
- 按钮
- 按钮
- 按钮
-
-
-
- 强引导
- 弱引导
-
-
-
-
-
-
-
-
-
- 创建首个网站
-
-
- 宽高自定义
-
-
-
-
- 成功提示
- 失败提示
- 警告提示
-
-
-
-
-
- 表单左右布局（直接使用封装好的input）
- -
-
-
-
-
-
-
-
-
-
-
-
-
- Submit
-
-
-
-
-
@@ -423,36 +377,36 @@ export default {
data() {
return {
tableData3: [{
- id: '12987122',
- name: '王小虎',
- amount1: '234',
- amount2: '3.2',
- amount3: 10
- }, {
- id: '12987123',
- name: '王小虎',
- amount1: '165',
- amount2: '4.43',
- amount3: 12
- }, {
- id: '12987124',
- name: '王小虎',
- amount1: '324',
- amount2: '1.9',
- amount3: 9
- }, {
- id: '12987125',
- name: '王小虎',
- amount1: '621',
- amount2: '2.2',
- amount3: 17
- }, {
- id: '12987126',
- name: '王小虎',
- amount1: '539',
- amount2: '4.1',
- amount3: 15
- }],
+ id: '12987122',
+ name: '王小虎',
+ amount1: '234',
+ amount2: '3.2',
+ amount3: 10
+ }, {
+ id: '12987123',
+ name: '王小虎',
+ amount1: '165',
+ amount2: '4.43',
+ amount3: 12
+ }, {
+ id: '12987124',
+ name: '王小虎',
+ amount1: '324',
+ amount2: '1.9',
+ amount3: 9
+ }, {
+ id: '12987125',
+ name: '王小虎',
+ amount1: '621',
+ amount2: '2.2',
+ amount3: 17
+ }, {
+ id: '12987126',
+ name: '王小虎',
+ amount1: '539',
+ amount2: '4.1',
+ amount3: 15
+ }],
tableWidth: 0,
currentPage: 1, //当前页
pageSize: 5, //每页的容量
@@ -467,6 +421,9 @@ export default {
form: {
username: '',
language: '',
+ input1: '',
+ input2: '',
+ input3: '',
},
languageOptions: [
{ label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh' },
@@ -561,6 +518,44 @@ export default {
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
+ tableData4: [{
+ 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 }, // 支持气泡框
@@ -615,7 +610,7 @@ export default {
label: "广州",
}
],
- tableData:[],
+ tableData: [],
input: 'hahhahah',
defaultValue: 'asdasda',
radio: 3,
@@ -632,8 +627,9 @@ export default {
borderRadius: '4px',
},
styleObject: {
- width: '200px',
- height: '40px'
+ minWidth: '200px',
+ maxWidth: '400px',
+ // height: '40px'
},
styleObject1: {
width: '600px',
@@ -679,47 +675,50 @@ export default {
},
methods: {
+ changeInputtest(e) {
+ console.log(e, '---000changeInputtest');
+ },
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
console.log(row, column);
- if (rowIndex % 2 === 0) {
- if (columnIndex === 0) {
- return [1, 2];
- } else if (columnIndex === 1) {
- return [0, 0];
- }
- }
- },
-
- objectSpanMethod({ row, column, rowIndex, columnIndex }) {
- console.log(row, column);
-
- if (columnIndex === 0) {
- if (rowIndex % 2 === 0) {
- return {
- rowspan: 2,
- colspan: 1
- };
- } else {
- return {
- rowspan: 0,
- colspan: 0
- };
- }
- }
- },
+ if (rowIndex % 2 === 0) {
+ if (columnIndex === 0) {
+ return [1, 2];
+ } else if (columnIndex === 1) {
+ return [0, 0];
+ }
+ }
+ },
+
+ objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+ console.log(row, column);
+
+ if (columnIndex === 0) {
+ if (rowIndex % 2 === 0) {
+ return {
+ rowspan: 2,
+ colspan: 1
+ };
+ } else {
+ return {
+ rowspan: 0,
+ colspan: 0
+ };
+ }
+ }
+ },
openMessage(type) {
console.log(type);
// 单独指定方法调用
- switch(type){
+ switch (type) {
case 'success':
this.$Message.success('成功，文案自定义')
- break;
+ break;
case 'error':
this.$Message.error('失败，文案自定义')
- break;
+ break;
case 'info':
this.$Message.info('提示，文案自定义')
- break;
+ break;
}
// 自定义选项
// this.$Message({
@@ -753,8 +752,8 @@ export default {
type: 0,
cur_page: 1,
page_size: 5,
- },{
- headers:{
+ }, {
+ headers: {
'AUTH': '3c901fa4a19a7ad9d01238890863d499'
}
}).then(response => {
@@ -827,8 +826,8 @@ export default {
onConfirm(row, prop) {
console.log('确认修改:', row, prop);
this.$message.success('修改成功');
- this.$set(this.tableData, row)
- console.log(this.tableData, 'this.tableData=====');
+ this.$set(this.tableData4, row)
+ console.log(this.tableData4, 'this.tableData=====');
},
// 取消事件
onCancel(row, prop) {
@@ -875,7 +874,7 @@ export default {
console.log(value, 'value===输入框输入得知');
},
handleClear(value) {
- this.defaultValue = '这是我清除后给的文案'
+ this.form.input3 = '这是我清除后给的文案'
// this.handleInput('')
console.log(value, 'value===qinghcu');
},
表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)
-
+
+
+ 悬停查看提示
+
+
+
+ 自定义提示内容
+
+
+
+
-
+ 甚至按钮
+
+
+ 自定义标题
+这里可以放任何HTML内容
+
-
-
-
-
-
- --------------------分割线0------------------------------
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 打开弹框
- 展示加载动画 2s
+
+
+
-
+
+ 这是一个自定义内容的弹框。
+
-
-
- 悬停查看提示
-
-
-
- 自定义提示内容
-
-
-
-
-
-
-
- 甚至按钮
-
-
- 自定义标题
-这里可以放任何HTML内容
-
-
- 这是一个自定义内容的弹框。
-