console
const deData = [
{
"visible":true,
"width":197,
"field":"shopName",
"type":"",
"header":"店铺名称",
"field_type":0,
"edit_type":0,
"sort":"shop_name",
"v":"2.2.31672729692954",
"fixed":"left",
"showTooltip":true,
"sortableField":"shop_name",
"sortBy":"shop_name",
"title":"店铺名称"
},
{"visible":true,"width":211,"field":"payDate","type":"","header":"付款时间","field_type":0,"edit_type":0,"sort":"pay_date","v":"2.2.31672729692954","fixed":"left","showTooltip":true,"sortableField":"pay_date","sortBy":"pay_date","title":"付款时间"},{"visible":true,"width":"150","field":"deliveryAssessmentTime","type":"","header":"发货考核时间","field_type":"slot","edit_type":0,"sort":"delivery_assessment_time","v":"2.2.31672729692954","fixed":"left","showTooltip":true,"sortableField":"delivery_assessment_time","sortBy":"delivery_assessment_time","title":"发货考核时间"},{"visible":true,"width":"","field":"returnWaybillNo","type":"","header":"退回运单号","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"退回运单号"},{"visible":true,"width":"200","field":"logisticsNo","dfield":"","type":"","header":"运单号","field_type":"slot","edit_type":0,"toolCopy":true,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"运单号"},{"visible":true,"width":"200","field":"tradeNoJoint","type":"","header":"交易单号","field_type":"slot","edit_type":0,"dbcopy":true,"sort":"trade_no_joint","toolCopy":true,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"trade_no_joint","sortBy":"trade_no_joint","title":"交易单号"},{"visible":true,"width":"150","field":"orderMarks","dfield":"orderMarks","type":"","header":"订单标识","field_type":"slot","edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"订单标识"},{"visible":true,"width":"","field":"platformDeliveryStatus","type":"","header":"平台发货状态","field_type":0,"edit_type":0,"sort":"platform_delivery_status","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"platform_delivery_status","sortBy":"platform_delivery_status","title":"平台发货状态"},{"visible":true,"width":"","field":"deliveryStatusZh","dfield":"systemDeliverStatus","type":"","header":"系统发货状态","field_type":0,"edit_type":0,"sort":"delivery_status","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"delivery_status","sortBy":"delivery_status","title":"系统发货状态"},{"visible":true,"width":336,"field":"deliveryDate","type":"","header":"发货时间","field_type":0,"edit_type":0,"sort":"delivery_date","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"delivery_date","sortBy":"delivery_date","title":"发货时间"},{"visible":true,"width":"","field":"logisticsCompanyName","dfield":"logisticsCompanyId","type":"","header":"物流公司","field_type":0,"edit_type":0,"sort":"logistics_company_id","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"logistics_company_id","sortBy":"logistics_company_id","title":"物流公司"},{"visible":true,"width":"150","field":"shopPlatformCode","dfield":"","type":"","header":"平台","field_type":"slot","edit_type":0,"sort":"shop_platform_code","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"shop_platform_code","sortBy":"shop_platform_code","title":"平台"},{"visible":true,"width":"150","field":"allGoodsName","dfield":"goodsMsg","type":"","header":"商品信息","field_type":"goods_info","goods_field":"allGoodsName","edit_type":0,"sort":"goods_code","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"goods_code","sortBy":"goods_code","title":"商品信息"},{"visible":true,"width":"","field":"orderGoodsCountZh","dfield":"orderGoodsCount","type":"","header":"商品数量","field_type":"html","edit_type":0,"sort":"order_goods_count","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"order_goods_count","sortBy":"order_goods_count","title":"商品数量"},{"visible":true,"width":"150","field":"buyerNick","dfield":"buyerNick","type":"","header":"买家昵称","field_type":"slot","edit_type":0,"sort":"buyer_nick","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"buyer_nick","sortBy":"buyer_nick","title":"买家昵称"},{"visible":true,"width":"","field":"receiverName","type":"","header":"收件人姓名","field_type":"slot","edit_type":0,"sort":"creator","showTooltip":true,"v":"2.2.31672729692954","fixed":"","sortableField":"creator","sortBy":"creator","title":"收件人姓名"},{"visible":true,"width":"","field":"receiverMobile","type":"","header":"收件人手机号","field_type":"slot","edit_type":0,"sort":"receiver_mobile","showTooltip":true,"v":"2.2.31672729692954","fixed":"","sortableField":"receiver_mobile","sortBy":"receiver_mobile","title":"收件人手机号"},{"visible":true,"width":"150","field":"receiverPhone","type":"","header":"收件人电话","field_type":"slot","edit_type":0,"sort":"receiver_phone","showTooltip":true,"v":"2.2.31672729692954","fixed":"","sortableField":"receiver_phone","sortBy":"receiver_phone","title":"收件人电话"},{"visible":true,"width":405,"field":"receiverAddress","type":"","header":"收件人地址","field_type":"slot","edit_type":0,"sort":"whole_address","showTooltip":true,"v":"2.2.31672729692954","fixed":"","sortableField":"whole_address","sortBy":"whole_address","title":"收件人地址"},{"visible":true,"width":"","field":"platformRefundStatusZh","dfield":"platformRefundStatus","type":"","header":"退款","field_type":"html","edit_type":0,"sort":"platform_refund_status","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"platform_refund_status","sortBy":"platform_refund_status","title":"退款"},{"visible":true,"width":"","field":"orderNo","type":"","header":"订单编号","field_type":"copyType","edit_type":0,"sort":"order_no","toolCopy":true,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"order_no","sortBy":"order_no","title":"订单编号"},{"visible":true,"width":"200","field":"createDate","type":"","header":"创建时间","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"创建时间"},{"visible":true,"width":"80","field":"goodsWeight","dfield":"weight","type":"","header":"订单重量","field_type":0,"edit_type":0,"sort":"goods_weight","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"goods_weight","sortBy":"goods_weight","title":"订单重量"},{"visible":true,"width":"","field":"meterageWeightQty","type":"","header":"实际重量","field_type":0,"edit_type":0,"sort":"meterage_weight_qty","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"meterage_weight_qty","sortBy":"meterage_weight_qty","title":"实际重量"},{"visible":true,"width":"","field":"totalPostFee","type":"","header":"实际物流成本","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"实际物流成本"},{"visible":true,"width":"80","field":"packWeight","type":"","header":"包裹重量","field_type":0,"edit_type":0,"sort":"pack_weight","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"pack_weight","sortBy":"pack_weight","title":"包裹重量"},{"visible":true,"width":"","field":"warehouseName","type":"","header":"仓库名称","field_type":0,"edit_type":0,"sort":"warehouse_id","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"warehouse_id","sortBy":"warehouse_id","title":"仓库名称"},{"visible":true,"width":265,"field":"logisticsPrintNo","type":"","header":"打印流水号","field_type":0,"edit_type":0,"sort":"logistics_print_no","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"logistics_print_no","sortBy":"logistics_print_no","title":"打印流水号"},{"visible":true,"width":"","field":"receiverProvince","type":"","header":"省","field_type":0,"edit_type":0,"sort":"receiver_province","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"receiver_province","sortBy":"receiver_province","title":"省"},{"visible":true,"width":"","field":"receiverCity","type":"","header":"市","field_type":0,"edit_type":0,"sort":"receiver_city","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"receiver_city","sortBy":"receiver_city","title":"市"},{"visible":true,"width":"","field":"receiverDistrict","type":"","header":"区","field_type":0,"edit_type":0,"sort":"receiver_district","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"receiver_district","sortBy":"receiver_district","title":"区"},{"visible":true,"width":"150","field":"deductionAmount","type":"","header":"扣点金额","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"扣点金额"},{"visible":true,"width":"","field":"presellDeliveryTime","type":"","header":"预计发货时间","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"预计发货时间"},{"visible":true,"width":143,"field":"payStatusZh","dfield":"payStatus","type":"","header":"付款状态","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"付款状态"},{"visible":true,"width":"150","field":"payAmount","type":"","header":"付款金额","field_type":0,"edit_type":0,"sort":"pay_amount","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"pay_amount","sortBy":"pay_amount","title":"付款金额"},{"visible":true,"width":"150","field":"remark","dfield":"systemRemark","type":"","header":"系统备注","field_type":0,"edit_type":0,"sort":"remark","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"remark","sortBy":"remark","title":"系统备注"},{"visible":true,"width":"150","field":"interceptName","type":"","header":"拦截类型","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"拦截类型"},{"visible":true,"width":99,"field":"interceptReason","type":"","header":"拦截原因","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"拦截原因"},{"visible":true,"width":"","field":"logisticsPrintNum","type":"","header":"物流单打印次数","field_type":0,"edit_type":0,"sort":"logistics_print_num","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"logistics_print_num","sortBy":"logistics_print_num"
,"title":"物流单打印次数"},{"visible":true,"width":"","dic_title":"deliveryPrintNumNew","field":"deliveryPrintNum","type":"","header":"发货单打印次数","field_type":0,"edit_type":0,"sort":"delivery_print_num","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"delivery_print_num","sortBy":"delivery_print_num","title":"发货单打印次数"},{"visible":true,"width":231,"field":"deliverOrderNo","type":"","header":"发货单编号","field_type":"copyType","edit_type":0,"dbcopy":true,"sort":"deliver_order_no","toolCopy":true,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"deliver_order_no","sortBy":"deliver_order_no","title":"发货单编号"},{"visible":true,"width":"80","field":"markLevelZh","dfield":"markLevel","type":"","header":"旗帜","field_type":"html","edit_type":0,"sort":"mark_level","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"mark_level","sortBy":"mark_level","title":"旗帜"},{"visible":true,"width":"","field":"scanOut","type":"","header":"是否扫描出库","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"是否扫描出库"},{"visible":true,"width":"","field":"buyerMessage","type":"","header":"买家留言","field_type":"slot","edit_type":0,"sort":"buyer_message","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"buyer_message","sortBy":"buyer_message","title":"买家留言"},{"visible":true,"width":"","field":"sellerMessage","type":"","header":"卖家备注","field_type":0,"edit_type":0,"sort":"seller_message","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"seller_message","sortBy":"seller_message","title":"卖家备注"},{"visible":true,"width":"","field":"intercept","type":"","dic_title":"orderInterceptType","header":"拦截状态","field_type":"slot","edit_type":0,"sort":"intercept","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"intercept","sortBy":"intercept","title":"拦截状态"},{"visible":true,"width":"150","field":"orderSourceCodeZh","type":"","header":"订单来源","field_type":0,"edit_type":0,"sort":"order_source_code","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"order_source_code","sortBy":"order_source_code","title":"订单来源"},{"visible":true,"width":"","field":"iconExtraLogisticsNo","dfield":"extraLogisticsNo","type":"","header":"追加运单号","field_type":"html","edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"追加运单号"},{"visible":true,"width":"","field":"isWeighed","type":"","header":"是否称重","field_type":"","edit_type":0,"sort":"isWeighed","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"isWeighed","sortBy":"isWeighed","title":"是否称重"},{"visible":true,"width":"","field":"logisticsStatus","type":"","header":"物流状态","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"物流状态"},{"visible":true,"width":"","field":"agingType","type":"","header":"时效类型","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"时效类型"},{"visible":true,"width":"","field":"ext1","type":"","header":"自定义字段1","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"自定义字段1"},{"visible":true,"width":"","field":"ext2","type":"","header":"自定义字段2","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"自定义字段2"},{"visible":true,"width":"","field":"ext3","type":"","header":"自定义字段3","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"自定义字段3"},{"visible":true,"width":"150","field":"latestDeliveryTimeZh","dfield":"latestDeliveryTime","type":"","header":"最晚发货时间","field_type":"html","edit_type":0,"sort":"latest_delivery_time","toolTip":"对应淘宝、快手、抖店、拼多多的承诺发货时间","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"latest_delivery_time","sortBy":"latest_delivery_time","title":"最晚发货时间"},{"visible":true,"width":"200","field":"logisticsNoCreateDate","type":"","header":"获取运单号时间","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"获取运单号时间"},{"visible":true,"width":"150","field":"salesManZh","dfield":"salesMan","type":"","header":"销售员","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"销售员"},{"visible":true,"width":"150","field":"promotionTypeZh","dfield":"promotionType","type":"","header":"推广类型","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"推广类型"},{"visible":true,"width":222,"field":"platformOrderCode","type":"","header":"BIC订单码","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"BIC订单码"},{"visible":true,"width":"150","field":"otherGoodsName","type":"","header":"赠品和耗材","field_type":"goods_info","edit_type":0,"sort":false,"goods_field":"otherGoodsName","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":false,"sortBy":"","title":"赠品和耗材"},{"visible":true,"width":"","field":"pickOrderNo","dfield":"bicPickOrderNo","type":"","header":"BIC分拣单号","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"BIC分拣单号"},{"visible":true,"width":"150","field":"creatorZh","dfield":"creator","type":"","header":"制单人","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"制单人"},{"visible":false,"width":"200","field":"logisticsPrintDate","type":"","header":"物流单打印时间","field_type":0,"edit_type":0,"sort":"logistics_print_date","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"logistics_print_date","sortBy":"logistics_print_date","title":"物流单打印时间"},{"visible":false,"width":"200","field":"sourceCreateDate","type":"","header":"下单时间","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"下单时间"},{"visible":false,"width":"200","field":"orderStatusDate","type":"","header":"审核时间","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"审核时间"},{"visible":false,"width":"150","field":"orderFlagName","dfield":"orderFlagId","type":"","header":"标记","field_type":0,"edit_type":0,"sort":"order_flag_id","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortableField":"order_flag_id","sortBy":"order_flag_id","title":"标记"},{"visible":false,"width":"150","field":"distributorName","type":"","header":"分销商名称","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"分销商名称"},{"visible":false,"width":"150","field":"invoiceTitles","type":"","header":"发票抬头","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"发票抬头"},{"visible":false,"width":"140","field":"cancelLogisticsInfo","type":"","header":"已取消运单号","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"已取消运单号"},{"visible":false,"width":"150","field":"goodsName","dfield":"goodsInfo","type":"","header":"商品","field_type":"goods_info","edit_type":0,"goods_field":"goodsName","v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"商品"},{"visible":false,"width":"","field":"extOrderNo","type":"","header":"分销外部单号","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"分销外部单号"},{"visible":false,"width":"","field":"scanOutUserName","dfield":"scanOutUserCode","type":"","header":"扫描员","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"扫描员"},{"visible":false,"width":"","field":"vipGroupName","type":"","header":"会员分组","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"会员分组"},{"visible":false,"width":"","field":"ordersPayType","type":"","header":"订单支付方式","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"订单支付方式"},{"visible":false,"width":"","field":"discountRuleName","type":"","header":"折扣规则","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"折扣规则"},{"visible":false,"width":"","field":"logisticsPrintUserName","type":"","header":"打印人","field_type":0,"edit_type":0,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"打印人"},{"visible":false,"width":"","field":"extraLogisticsNo","type":"","header":"子运单号","field_type":0,"edit_type":0,"useHeader":true,"v":"2.2.31672729692954","fixed":"","showTooltip":true,"sortBy":"","title":"子运单号"},{"visible":false,"field":"goodsNameStr","header":"商品名称","title":"商品名称"},{"visible":false,"field":"shortGoodsNameStr","header":"商品简称","title":"商品简称"},{"visible":false,"field":"goodsCodeStr","header":"系统商品编码","title":"系统商品编码"},{"visible":false,"field":"platformGoodsName","header":"平台商品名称","title":"平台商品名称"},{"visible":false,"field":"specsStr","header":"系统规格","title":"系统规格"},{"visible":false,"field":"platformGoodsSpecsStr","header":"平台规格名称","title":"平台规格名称"},{"visible":false,"field":"articleNoStr","header":"商品货号","title":"商品货号"},{"visible":false,"field":"platformGoodsCodeStr","header":"平台商品ID","title":"平台商品ID"},{"visible":false,"field":"platformSkuIdStr","header":"平台商品skuId","title":"平台商品skuId"},{"visible":false,"field":"goodsPlatformCodeStr","header":"平台商品sku编码","title":"平台商品sku编码"},{"visible":false,"field":"invoiceTitleType","header":"发票抬头类型-发票信息","title":"发票抬头类型-发票信息"},{"visible":false,"field":"invoiceKind","header":"发票类型-发票信息","title":"发票类型-发票信息"},{"visible":false,"field":"invoiceTitleKind","header":"发票种类-发票信息","title":"发票种类-发票信息"},{"visible":false,"field":"invoiceTitle","header":"发票抬头-发票信息","title":"发票抬头-发票信息"},{"visible":false,"field":"invoiceContent","header":"发票内容-发票信息","title":"发票内容-发票信息"},{"visible":false,"field":"taxpayerNumber","header":"纳税人识别号-发票信息","title":"纳税人识别号-发票信息"},{"visible":false,
"field":"invoiceAmount","header":"发票金额-发票信息","title":"发票金额-发票信息"}
]
var Main = {
data () {
return {
tableData:[],
showHelpTip1: false,
filterVal: '',
tableData1: [
{
id: 10001,
name: 'Test1',
nickname: 'T1',
role: 'Develop',
sex: 'Man',
age: 28,
address: 'Shenzhen'
},
{ id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
{ id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' }
],
gridOptions: {
border: true,
columns: [
{type: 'seq', width: 60},
{field: 'name',title: 'Name'},
{field: 'sex',title: 'Sex'},
{field: 'date',title: 'Date'},
{field: 'address',title: 'Address'}
],
data: []
}
}
},
mounted () {
var list1 = []
var list2 = []
for(var index = 0; index < 3; index++){
list1.push({
name: 'test' + index,
role: 'developer',
sex: 'Man',
date: '2019-05-01',
time: 1556677810888 + index * 500,
region: 'ShenZhen',
address: 'address abc' + index
})
list2.push({
name: 'test' + index,
role: 'developer',
sex: 'Man',
date: '2019-05-01',
time: 1556677810888 + index * 500,
region: 'ShenZhen',
address: 'address abc' + index
})
}
this.gridOptions.data = list2
},
created () {
setTimeout(() => {
this.tableData = deData
}, 1000)
this.rowDrop()
},
beforeDestroy () {
if (this.sortable1) {
this.sortable1.destroy()
}
},
methods: {
rowDrop () {
this.$nextTick(() => {
const xTable = this.$refs.xTable1
this.sortable1 = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
handle: '.drag-btn',
onEnd: ({ newIndex, oldIndex }) => {
const currRow = this.tableData.splice(oldIndex, 1)[0]
this.tableData.splice(newIndex, 0, currRow)
}
})
})
},
filterNameEvent() {
const { filterVal } = this
const xTable = this.$refs.xTable1
const column = xTable.getColumnByField('title')
column.filterMethod = function({ option, row }) {
return row.title.indexOf(option.data) > -1
}
column.filters = [{ data: '' }]
column.filters[0].data = filterVal
column.filters[0].checked = true
xTable.updateData()
},
}
};
var app = new Vue(Main).$mount('#app')
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@3.6.9"></script>
<div id="app">
<template>
<vxe-input
v-model="filterVal"
placeholder="默认尺寸"
@input="filterNameEvent"></vxe-input>
<div style="height: 500px">
<vxe-table
border
ref="xTable1"
class="sortable-row-demo"
max-height="100%"
auto-resize
resizable
row-id="field"
:row-config="{useKey: true}"
:scroll-y="{enabled: false}"
:data="tableData"
:checkbox-config="{ labelField: 'title', checkField: 'visible', trigger: 'row' }">>
<vxe-table-column
type="checkbox"
title="选择导出字段"
field="title">
</vxe-table-column>
<vxe-column width="60" field="field">
<template #default>
<span class="drag-btn">
<i class="vxe-icon-edit"></i>
</span>
</template>
<template #header>
<vxe-tooltip
v-model="showHelpTip1"
content="按住后可以上下拖动排序！"
enterable>
<i
class="vxe-icon-question-circle-fill"
@click="showHelpTip1 = !showHelpTip1">
</i>
</vxe-tooltip>
</template>
</vxe-column>
</vxe-table>
</div>
<div>
<p>Table 演示</p>
<vxe-table
border
:data="tableData">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="date" title="Date"></vxe-column>
<vxe-column field="address" title="Address"></vxe-column>
</vxe-table>
<p>Grid 演示</p>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
</div>
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");