后台管理系统,需要这个功能点的特别多,但Element UI 的table组件本身是不提供的,所以需要自行拓展一下。
在这里,给大家写一个简单的示例,希望对小伙伴们有所帮助。
先看看效果图:
el-table
我们直接去Element UI 官网 把 table组件的代码copy过来
<template> <div> <el-table ref="filterTable" :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="地址" :formatter="formatter"> </el-table-column> <el-table-column prop="tag" label="标签" width="100" :filters="tagList" :filter-method="filterTag" filter-placement="bottom-end"> <template slot-scope="scope"> <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag> </template> </el-table-column> </el-table> </div> </template>
<script> export default { data() { return { tagList: [{ text: '家', value: '家' }, { text: '公司', value: '公司' }], tableData: [{ date: '2016-05-02', name: '张三', address: '深圳', tag: '家' }, { date: '2016-05-04', name: '李四', address: '北京', tag: '公司' }, { date: '2016-05-01', name: '王五', address: '上海', tag: '家' }, { date: '2016-05-03', name: '李六', address: '北京', tag: '公司' }] } }, methods: { filterTag(value, row) { return row.tag === value; }, formatter(row, column) { return row.address; } } } </script>稍稍的修整了一下,把tags的filters提到data里面作为变量了,后续可以用。
然后我们添加一个按钮,来添加行
table动态插入行
<template> <div> <el-button @click="add">添加一条</el-button> <el-table > ... ... </el-table> </div> </template>
<script> ... methods: { add() { this.tableData.push({ date: '2019-4-01', name: '默认数据', address: '上海', tag: '公司', status: 1 }); } } ... </script>add方法,向el-table的数据源tableData里面push一条新的数据,并且添加一个字段,我这里叫status(名字随便啦)。主要用来区分这条数据的当前状态,是编辑态,还是已经保存了的。1就是编辑态,如果保存了,我们就改为0。
有了status这个状态,我们就去修改el-table组件,根据status这个状态来判断,是显示可以编辑,还是不可编辑。
el-table组件修改
这时候,我们就去自定义每列内容
日期列
... <el-table-column prop="date" label="日期" width="180" > <template slot-scope="scope"> <el-date-picker v-if="scope.row.status" v-model="scope.row.date" type="date" placeholder="选择日期"> </el-date-picker> <span v-else>{{scope.row.date}}</span> </template> </el-table-column>判断,如果scope.row.status有值(编辑态),我们就用日期组件el-date-picker,否则就用span标签,直接渲染数据。
这里日期组件同样可以直接使用v-model双向绑定。
同理完成其他列
姓名
<el-table-column prop="name" label="姓名" width="180"> <template slot-scope="scope"> <el-input v-if="scope.row.status" v-model="scope.row.name"></el-input> <span v-else>{{scope.row.name}}</span> </template> </el-table-column>地址
<el-table-column prop="address" label="地址" :formatter="formatter"> <template slot-scope="scope"> <el-select v-if="scope.row.status" v-model="scope.row.address" placeholder="请选择"> <el-option v-for="item in cityList" :key="item" :label="item" :value="item"> </el-option> </el-select> <span v-else>{{scope.row.address}}</span> </template> </el-table-column>标签
<el-table-column prop="tag" label="标签" width="100" :filters="tagList" :filter-method="filterTag" filter-placement="bottom-end"> <template slot-scope="scope"> <el-select v-if="scope.row.status" v-model="scope.row.tag" placeholder="请选择"> <el-option v-for="item in tagList" :key="item.value" :label="item.text" :value="item.value"> </el-option> </el-select> <el-tag v-else :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag> </template> </el-table-column>上面用到了1个变量,用来选择城市的,我们在data里面添加一下
... data() { return { cityList: ['北京', '深圳', '上海'] ... } }这样就基本完成了第一张图的功能,但是需要新增的时候,同时保存没有保存的功能。
保存
这里我们会用到上面提到过的status,1是编辑态,如果保存了,我们就改为0。
ok,在新增的时候,我们先判断,有没有未保存的数据,也就是有没有数据的status为1,如果是1,我们就将这条数据的status改为0。
... add() { this.tableData.map(item=>{ if(item.status){ item.status = 0; } return item; }) ... }至此,是不是感觉就简单了。