<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>yk</title> <!--注意引用的顺序,《script》Vue一定要在Iview的前面--> <link rel="stylesheet" href="./vueIview/iview.css"> <script src="./vueIview/vue.min.js"></script> <script src="./vueIview/iview.min.js"></script> <script type="text/javascript" src="vueIview/jquery-3.3.1.min.js"></script> <link rel="stylesheet" type="text/css" href="css/table_1.css" /> </head> <body> <div id="gh"> <i-table border :columns='columns1' :data='data1'></i-table> </div> <script> $(function (id,callback) { $.ajax({ type:"GET", dataType:"json", url: "自己请求数据的网址", success:function (json) { let data=json.data; let columns=[ { title: "姓名", key: "empname", className:"table_type" }, { title: "工号", key: "empno" }, { title: "有效日期", key: "valid_date" }, { title: "工站代码", key: "position_code" }, { title: "失效日期", key: "invalid_date" }, ] setTableData(columns,data) callback(data); } }) function setTableData(columns,data) { var main = { data() { return { columns1:columns, data1:data } } } var Component = Vue.extend(main) new Component().$mount("#gh") } }) </script> </body> </html>
用CSS给表格设置格式:
#gh{margin: 30px;} .ivu-table td{text-align: center;} .ivu-table th{text-align: center;} .ivu-table td.table_type{ background: #AA22FF; color: #e6e6e6;
运行如下: