npm装置
npm install umy-ui按需引入
在main.js中增加按需引入代码
import { UTable } from 'umy-ui'Vue.use(UTable)示例
<template> <u-table :data="tableData" :border="false" style="width: 100%"> <template slot="empty"> 没有查问到符合条件的记录 </template> <u-table-column prop="name" label="名字" width="180"> </u-table-column> <u-table-column prop="sex" label="性别" width="180"> </u-table-column> <u-table-column prop="age" label="年龄"> <template v-slot="scope"> <el-select v-model="scope.row.sex"> <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </template> </u-table-column> </u-table></template><script> export default { data() { return { sexList: [ { value: 1,label: '男' }, { value: 2,label: '女'}, { value: 3,label: '未知'} ], tableData: [{ sex: '男', name: '王小虎', age: '15' }, { sex: '女', name: '王小明', age: '15' }, { sex: '女', name: '王小丽', age: '15' }, { sex: '未知', name: '王小狗', age: '15' }] } } }</script>甚至你还能这样做，都是兼容的
应用element-ui中的table组件，在外层用u-table包裹起来就行了
<template> <u-table :data="tableData" :border="false" :max-height="tableHeight" use-virtual @selection-change="handleSelectionChange" > <el-table-column align="center" type="selection" width="55" ></el-table-column> <el-table-column label="单位简称" prop="nameSimplify" ></el-table-column> <el-table-column label="级别" prop="levelCN" ></el-table-column> </u-table></template><script> export default { data() { return { sexList: [ { value: 1,label: '男' }, { value: 2,label: '女'}, { value: 3,label: '未知'} ], tableData: [{ sex: '男', name: '王小虎', age: '15' }, { sex: '女', name: '王小明', age: '15' }, { sex: '女', name: '王小丽', age: '15' }, { sex: '未知', name: '王小狗', age: '15' }] } } }</script>