建站优化一条龙,聊城汽车网站建设,wordpress微信分享按钮,厦门 外贸商城网站建设我们在项目中经常会用到对于表格的增删查改操作#xff0c;以下使用vue2elementui来实现表格的增删查改 表格的基本属性
基础表格如下:(其中需要注意的是当el-table元素中注入data对象数组后#xff0c;在el-table-column中用prop属性来对应对象中的键名即可填入数据#x… 我们在项目中经常会用到对于表格的增删查改操作以下使用vue2elementui来实现表格的增删查改 表格的基本属性
基础表格如下:(其中需要注意的是当el-table元素中注入data对象数组后在el-table-column中用prop属性来对应对象中的键名即可填入数据用label属性来定义表格的列名。可以使用width属性来定义列宽。) templateel-table:datatableDatastylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table/templatescriptexport default {data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}]}}}/script使用带斑马纹的表格可以更容易区分出不同行的数据。 stripe属性可以创建带斑马纹的表格。它接受一个Boolean默认为false设置为true即为启用。 带边框表格 默认情况下Table 组件是不具有竖直方向的边框的如果需要可以使用border属性它接受一个Boolean设置为true即可启用。 带状态表格 可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class表明该行处于某种状态。 templateel-table:datatableDatastylewidth: 100%:row-class-nametableRowClassNameel-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table
/templatestyle.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}
/stylescriptexport default {methods: {tableRowClassName({row, rowIndex}) {if (rowIndex 1) {return warning-row;} else if (rowIndex 3) {return success-row;}return ;}},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以上代码的效果是 具体的逻辑如下通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class表明该行处于某种状态。下面这个函数传入的是一个对象row表示的是每一行的数据信息rowIndex表示的是索引下标。一下表示行标为1 的显示warning-row的style效果行标为3的显示成功的效果 tableRowClassName({row, rowIndex}) {if (rowIndex 1) {return warning-row;} else if (rowIndex 3) {return success-row;}return ;}我们可以在这里改需求比如说如果想要奇数偶数页不同我们可以改变函数 tableRowClassName ({ row, rowIndex }) {if (rowIndex%2 0) {return warning-row;} else {return success-row;}return ;}再比如修改日期为具体某一天的颜色 // 日期是五月一号的改颜色tableRowClassName ({ row, rowIndex }) {if (row.date 2016-05-01) {return warning-row;} else {return success-row;}return ;}固定表头 只要在el-table元素中定义了height属性即可实现固定表头的表格而不需要额外的代码。 固定列 固定列需要使用fixed属性它接受 Boolean 值或者leftright表示左边固定还是右边固定。 固定列和表头可以同时使用只需要将上述两个属性分别设置好即可。
排序 在列中设置sortable属性即可实现以该列为基准的排序接受一个Boolean默认为false。 筛选 在列中设置filtersfilter-method属性即可开启该列的筛选filters 是一个数组filter-method是一个方法它用于决定某些数据是否显示会传入三个参数value, row 和 column。 templateel-table:datatableDataborder:row-class-nametableRowClassNamestylewidth: 100%!-- 其中这个prop一定要和下面tableData中的键保持一致 --el-table-columnpropdatelabel日期sortablewidth180:filters[{ text: 2016-05-01, value: 2016-05-01 }, { text: 2016-05-02, value: 2016-05-02 }, { text: 2016-05-03, value: 2016-05-03 }, { text: 2016-05-04, value: 2016-05-04 }]:filter-methodfilterHandler/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-columnel-table-columnproptaglabel标签:filterstagFilter:filter-methodfilterHandlerfilter-placementbottom-endtemplate slot-scopescope//对表格里面的数据进行处理的话需要用到template,对于这个数据我们是不方便自定义的如果要对数据进行更多的自定义我们就可以使用templatescope相当于是一整个数据对象//下面的意思是拿到的数据等于家就显示primary这种样式否则后面一种样式el-tag:typescope.row.tag 家 ? primary : successdisable-transitions{{ scope.row.tag }}/el-tag/template/el-table-column/el-table/templatescript
export default {name: Navbar,data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,tag: 家}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄,tag: 公司}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,tag: 家}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄,tag: 公司}]};},computed: {// filter中的数据是静态的但是大多数项目中都是动态的所以上面的filter需要进行变化tagFilter () {// 此时数据重复需要进行降重处理// return this.tableData.map(v({ text: v.tag, value: v.tag }))let map new Map();for (let item of this.tableData) {if (!map.has(item.tag)) {map.set(item.tag,item)}};// 但是当前map是一个二维数组需要进行转换let data [...map.values()]return data.map(v({ text: v.tag, value: v.tag }))}},methods: {// value代表的是当前的数据row代表的是整个对象column表示的是表格的特性可以拿到某个属性的名字filterHandler (value, row, column) {const property column[property];// 这个的意思就是从表格里面筛选出来和value相同的值return row[property] value; // row[property]就比如说我拿到tableData中的date ,即tableData[date]}
},
};
/script
动态数据的增删查改
我们使用json-server模拟请求以及请求回来的过程。详情请看json-server的入门
拿到数据展示到页面
template el-table:datatableDataborderstylewidth: 100%!-- 其中这个prop一定要和下面tableData中的键保持一致 --el-table-columnproptitlelabel文章标题width180/el-table-columnel-table-columnpropuserlabel姓名width180/el-table-columnel-table-columnpropdatelabel日期sortablewidth180/el-table-columnel-table-columnpropidlabelID/el-table-columnel-table-columnpropchecklabel状态/el-table-column/el-table/templatescript
import axios from axios;
export default {name: Navbar,data() {return {//动态数据需要对应传过来的键名tableData: []};},methods: {},created () {axios.get(http://localhost:3009/userList).then(res {// this.tableData res;console.log(res.data);this.tableData res.data;})}
};
/scriptstyle
/style
我们会发现没有状态的值就算展示也不能直接展示布尔值在这里我们可以用到标签 el-table-columnpropchecklabel状态template slot-scopescopeel-tag:typescope.row.check false ? primary : successdisable-transitions{{ scope.row.check }}/el-tag/template/el-table-column接着要进行文本格式化转化为用户能够识别的文字。这个文本格式化要借助过滤器然后通过管道的思想把它加添加进去 filters: {checkFilter (v) {switch (v) {case true:return 已发表case false:return 未发表default:return 未发表}}},el-tag:typescope.row.check ? success:primary disable-transitions{{ scope.row.check| checkFilter }}/el-tag最后的效果 增加操作项编辑和删除 el-table-column label操作template slot-scopescopeel-buttonsizeminiclickhandleEdit(scope.$index, scope.row)编辑/el-buttonel-buttonsizeminitypedangerclickhandleDelete(scope.$index, scope.row)删除/el-button/template/el-table-column我们将添加项放到最顶上 el-buttontypesuccessroundsizeminiclickhandleSet(add,null)增加/el-button但是这个时候出现了一个问题vscode代码行会有很多红色的波浪行原因是代码和vetur插件的格式不对应所以导致出现红色波浪线解决办法有1.在template下用一个div标签包裹住我们所写的代码或者用el-card包裹住也可以。 2.设置vetur将以下三个选项的勾选全部取消掉 但是事实证明虽然没有红色波浪线了但是运行的时候仍然会报错。所以最好还是采用第一种方法解决。
添加和编辑
首先可以先捋顺一下添加和编辑的思路添加的话弹出的对话框中的数据都是空的而编辑的话里面则是都有之前的数据的 所以我们在添加点击事件的时候 !-- 添加 --el-buttontypesuccessroundsizeminiclickhandleSet(add,null)增加/el-button!-- 编辑 --el-buttonsizeminiclickhandleSet(update,row)编辑/el-button添加弹框思路是如果先通过三元运算符来判断是添加还是编辑如果是添加的话就需要弹出来的框里面没有内容如果是编辑的话就显示之前的内容visible.sync这个是用来判断这个对话框是否弹出默认不弹出false触发了点击事件以后就将其变为true。其中还form表示的是整个弹框对象当然里面有哪些内容还是要取决于tableData比如table里面有标题title姓名name日期dateidcheck状态等这些变量那么我们的form里面就要在这个变量范围内本次用的是form.userform.titleform.dateform.check el-dialog:titlestateadd?添加:编辑:visible.syncdialogTableVisible!-- 其中下面这个form代表的是整个弹框对象 --el-form :modelformel-form-item label发布作者el-input v-modelform.user/el-input/el-form-itemel-form-item label文章标题el-input v-modelform.title/el-input/el-form-itemel-form-item label日期el-date-pickerv-modelform.datetypedateplaceholder选择日期/el-date-picker/el-form-itemel-form-item label状态el-switchv-modelform.checkactive-color#13ce66inactive-color#ff4949/el-switch/el-form-item/el-formdivslotfooterclassdialog-footerel-button clickdialogTableVisible false取 消/el-buttonel-buttontypeprimaryclickdialogTableVisible false确 定/el-button/div/el-dialog其中点击事件中我们先要看是哪种状态我们要把是add还是update传入到我们的state中来判断到底是要添加还是编辑接着将弹窗状态变为true methods: {handleSet (type, row) { //设置数据this.state type;this.dialogTableVisible true; //弹框的状态}},结果为点击添加添加的弹窗如下点击编辑编辑的弹窗也如下我们可以看到编辑的弹窗应该要有之前原本的内容但是现在还没有加进来 所以我们要在点击事件中要判断类型如果是添加则form的值为空如果是编辑则form的值为row见下面代码的最后一行 handleSet (type, row) { //设置数据this.state type;this.dialogTableVisible true; //弹框的状态type add ? this.form {} : this.form row;}此时我们再试一次
另外我们还可以看一下状态此时未发表的状态是红色按钮已发表的是绿色按钮。 但是此时还有一个bug当我们修改了编辑中的日期我们会发现表格中的日期会变成undefined为什么会这样呢原因在于这一块涉及到了深浅拷贝简单来讲就是B复制了A修改A时如果B发生了变化就是浅拷贝如果没有变化就是深拷贝 解决办法加扩展运算符扩展运算符是深拷贝还是浅拷贝
handleSet (type, row) { //设置数据this.state type;this.dialogTableVisible true; //弹框的状态type add ? this.form {} : this.form { ...row };}然后我们可以进行添加或者编辑操作了但是现在我们的添加和编辑是同一个那么到底是放到添加还是编辑里面呢接下来就聊一聊弹框中数据的处理这就是弹框中“确定”的处理。针对编辑和添加共用一个弹框的处理。 为“确定”按钮添加点击事件
el-buttontypeprimaryclickupdateData()确 定/el-button我们可以通过接口文档数据的添加是post请求数据的编辑是put请求 async updateData () { //提交(可能是编辑的也有可能是添加的)let method this.state add ? post : put; //判断状态如果是添加就是post否则就是putlet res await axios({ //在里面要发送请求拿到具体的数据里面包含以下几种method: method, //请求的类型如果是添加就是post编辑就是puturl: data/${this.state}, //后面的值不确定是add还是update所以可以通过${this.state}来获取data: this.form //具体的数据对象})}this.userList(); //写完以后再次调用数据的查询我们会发现上面新增的时间出现问题所以我们需要进行时间的转换在过滤器filters中写 dateFilter (v) {let d new Date(v);let timer d.getFullYear() - (d.getMonth() 1) - (d.getDate());return timer;}然后在日期上面添加一个template el-table-columnpropdatelabel日期sortablewidth180template slot-scope{row}{{ row.date |dateFilter}}/template/el-table-column结果如下
