Vue—用$refs获取DOM元素+导出Excel
功能是Vue导出Excel。讲解是获取DOM元素。$refs获取页面元素。
·
功能是Vue导出Excel。讲解是获取DOM元素。
<div id="api">
**//用属性ref赋值为table,为了js方法里好找到。**
<Table ref="table" height="400" size="small" :columns="columns7" :stripe="true" :data="data6" border ></Table>
</div>
<script>
import axios from "axios";
import Util from "../../libs/util";
export default {
data() {
return {
//表格显示的内容。
columns7: [
{
title: "SAP工单",
key: "sapOrderID"
},
{
title: "销售订单号",
key: "salesOrderID"
},
{
title: "物料编码",
key: "defID"
},
{
title: "物料描述",
key: "defDescript"
},
{
title: "工单类型",
key: "sapOrderType"
},
{
title: "车间",
key: "departID"
},
{
title: "创建时间",
key: "createdOn"
}
],
data6: [],
isShowDialog: false,
isShowDeleteDialog: false,
dialogTitle: "新增用户",
item: {
userID: 0,
name: "",
age: 0,
address: "",
sex: "",
work: "",
createOn: "",
pageIndex: 0,
pageSize: -1
},
itemSearch: {
id: 0,
sapOrderID: "",
sapOrderType: "",
salesOrderID: "",
defID: "",
defDescript: "",
departID: "",
createdOn: "",
pageIndex: 0,
pageSize: 10
},
actionIndex: -1,
apiUrl: "http://172.16.6.155/portalapi/api/erpOrder", //util.ajaxUrl + '/erpOrder', //172.16.6.155
saveType: "new" /* new / edit */,
// 初始化信息总条数
dataCount: 1000,
// 每页显示多少条
pageSize: 10,
spinShow: false
},
methods: {
exportData (type) {
if (type === 1) {
//用$refs.table获取页面的元素table
this.$refs.table.exportCsv({
filename: 'data'
});
}
},
}
Vue代码实现简单灵活,但要明白原理才可实现的!
更多推荐
已为社区贡献4条内容
所有评论(0)