vue中使用lauui.使用方法
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>标题</title>
<link rel="stylesheet" href="<%= BASE_URL %>layui/css/layui.css">
<script src="<%= BASE_URL %>layui/layui.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
添加这一行就行了:
<link rel="stylesheet" href="<%= BASE_URL %>layui/css/layui.css">
<script src="<%= BASE_URL %>layui/layui.js"></script>
vue中layui表格不显示:
解决方案:显示layui的表格要放在vue生命周期mounted里.不能放在created
VUE created与mounted区别
1）created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 2）mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
<template>
<div id="app">
<table id="test" lay-filter="test"></table>
<div id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="save">保存</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
<table id="test2" lay-filter="test2"></table>
</div>
</template>
<script>
function 显示表格(){
layui.use(["table", "util"], function () {
var table = layui.table;
var util = layui.util;
//展示已知数据
table.render({
elem: "#test2",
cols: [
[
{
title: "操作",
fixed: "left",
align: "center",
toolbar: "#barDemo",
width: 120,
},
{ field: "id", title: "ID", sort: true, width: 120 },
{ field: "用户名", title: "用户名", sort: true },
{ field: "时间", title: "时间", sort: true },
{ field: "v1", title: "v1", sort: true, edit: "text" },
{ field: "v2", title: "v2", sort: true, edit: "text" },
],
],
data: [],
//,skin: 'line' //表格风格
even: true,
page: true, //是否显示分页
limits: [10, 500, 2000, 5000],
limit: 10, //每页默认显示的数量
});
});
}
export default {
created() {
//这里luaui的表格不会显示
显示表格();
},
mounted (){
//这里luaui的表格会显示
显示表格();
}
}
</script>
