用vue2制作一个和我文件中的图片一样的的表格
时间: 2025-01-04 13:39:43 浏览: 7
要使用 Vue 2 制作一个与你文件中类似的表格,可以参考以下步骤:
安装 Vue CLI(如果还没有安装):
npm install -g @vue/cli
创建一个新的 Vue 项目:
vue create my-project cd my-project
**在
src
目录下创建一个组件,例如FailureTable.vue
**:<template> <div class="table-container"> <table border="1" style="border-collapse: collapse; width: 100%;"> <thead> <tr> <th>失效后果等级值</th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>失效可能性</th> </tr> </thead> <tbody> <tr> <td rowspan="2">失效后果</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td rowspan="2">1</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td>5</td> </tr> </tbody> </table> </div> </template> <script> export default { name: 'FailureTable' } </script> <style scoped> .table-container { margin: 20px; } table, th, td { border: 1px solid black; padding: 8px; } th, td { text-align: center; } </style>
在主组件
App.vue
中引入并使用FailureTable
组件:<template> <div id="app"> <FailureTable /> </div> </template> <script> import FailureTable from './components/FailureTable.vue' export default { name: 'App', components: { FailureTable } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
运行项目:
npm run serve
这样,你就可以在浏览器中看到一个类似于你文件中图片的表格。你可以根据需要进一步调整样式和内容。