初始化

lms/nladmin-ui/src/views/system/grid/table.vue

@@ -0,0 +1,93 @@
+<template>
+  <div style="padding: 10px">
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      highlight-current-row
+      style="width: 100%;"
+      :data="crud.data"
+      border
+      @selection-change="crud.selectionChangeHandler"
+    >
+      <el-table-column type="selection" width="55" />
+      <div v-for="(item, index) in tableHeader" :key="index">
+        <el-table-column
+          v-if="item.code === 'level' && item.is_hidden === '0'"
+          :prop="item.code"
+          :label="item.name"
+          :width="item.width"
+          :align="item.align"
+        >
+          <template slot-scope="scope">
+            <el-switch
+              v-model="scope.row.level === 1"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-else-if="item.code === 'name' && item.is_hidden === '0'"
+          :label="item.name"
+          :width="item.width"
+          :align="item.align"
+        >
+          <template slot-scope="scope">
+            <el-tag type="success">
+              {{ scope.row.name }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-else-if="item.is_hidden === '0'"
+          :prop="item.code"
+          :label="item.name"
+          :width="item.width"
+          :align="item.align"
+        />
+      </div>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button size="mini" type="danger" icon="el-icon-minus" @click="del(scope.row)" />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import crudGridFields from '@/api/system/gridField'
+import CRUD, { crud, header, presenter } from '@crud/crud'
+import crudRoles from '@/api/system/role'
+
+const role_grid_code = 'roleGrid' // 定义角色表格样式code
+export default {
+  name: 'TableTest',
+  cruds() {
+    return CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles }})
+  },
+  mixins: [presenter(), header(), crud()],
+  data() {
+    return {
+      tableHeader: []
+    }
+  },
+  created() {
+    this.initRoleGridData()
+  },
+  methods: {
+    initRoleGridData() { // 获取表格字段属性
+      crudGridFields.getGridFieldsByCode(role_grid_code).then(res => {
+        this.tableHeader = res
+      })
+    },
+    del(row) {
+      console.log(row)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>