Vue.js仿Metronic高级表格(一)静态设计

Vue.js仿Metronic高级表格(一)静态设计

本篇文章主要讲解如何利用Vue.js实现仿照Metronic高级表格的静态设计。

准备工作

在开始本次任务之前，我们需要先准备好以下工具：

• Node.js
• Vue.js
• element-ui

步骤一：创建Vue项目

在命令行中输入以下命令来创建一个新的Vue项目：

vue create my-project

其中“my-project”为你想要取的项目名称。

步骤二：安装element-ui组件库

在命令行中输入以下命令来安装element-ui组件库：

npm install element-ui --save

步骤三：导入element-ui

在创建好的Vue项目中，打开“main.js”文件，导入element-ui：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

步骤四：创建一个表格组件

在组件文件夹中创建一个“Table.vue”组件，用于展示仿Metronic高级表格的静态设计：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="small">编辑</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  }
}
</script>

在以上代码中，我们使用了element-ui中的表格组件，并设置了表格的列数、列名、数据源等。我们还使用了element-ui中的按钮组件，用于表格中的操作。

步骤五：引入并展示表格组件

在“App.vue”文件中引入并展示我们刚才创建的“Table.vue”组件：

<template>
  <div id="app">
    <Table></Table>
  </div>
</template>

<script>
import Table from './components/Table.vue'

export default {
  name: 'App',
  components: {
    Table
  }
}
</script>

在以上代码中，我们将“Table.vue”组件通过import导入，并在Vue实例的components中注册，最后在App.vue中进行展示。至此，我们的仿Metronic高级表格的静态设计已经完成。

示例说明一：表格基础样式

在表格的第一列加入下列代码，可以使第一列的文本颜色变为红色，以突出显示：

<el-table-column
  prop="date"
  label="日期"
  width="180"
  :formatter="row => {
    return '<span style=\'color:red;\'>{{ row.date }}</span>';
  }">
</el-table-column>

示例说明二：表格操作按钮样式

在下列代码中，我们为表格的“编辑”操作按钮添加了一个按钮图标，并设置了按钮的颜色、大小等属性：

<el-table-column
  label="操作"
  width="200">
  <template slot-scope="scope">
    <el-button type="primary" size="small">
      <i class="el-icon-edit"></i> 编辑
    </el-button>
    <el-button type="danger" size="small">
      <i class="el-icon-delete"></i> 删除
    </el-button>
  </template>
</el-table-column>

以上就是如何利用Vue.js实现仿照Metronic高级表格的静态设计的完整攻略，我们通过element-ui的组件库实现了表格的基础样式和操作按钮样式，更多的样式和功能，则需要根据实际需求进行开发。