阅读网站模板商标注册证在哪里可以查到

当前位置： 首页 > news >正文

阅读网站模板,商标注册证在哪里可以查到,网站建设空间是指什么软件,网站建设php1、拖拽插件安装 npm i -S vuedraggable // vuedraggable依赖Sortable.js#xff0c;我们可以直接引入Sortable使用Sortable的特性。 // vuedraggable是Sortable的一种加强#xff0c;实现组件化的思想#xff0c;可以结合Vue#xff0c;使用起来更方便。 2、引入拖拽函数… 1、拖拽插件安装 npm i -S vuedraggable // vuedraggable依赖Sortable.js我们可以直接引入Sortable使用Sortable的特性。 // vuedraggable是Sortable的一种加强实现组件化的思想可以结合Vue使用起来更方便。 2、引入拖拽函数 import Sortable from sortablejs //1引入拖拽函数mounted() {this.rowDrop() //2组件创建时执行拖拽方法},// 3拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log(—rowDrop(拖拽初始化)—)const el document.querySelector(#table_count2 .el-tablebody-wrapper tbody);const that this;new Sortable(el, {animation: 150,handle: .handle_drop, //class类名执行事件ghostClass: blue-background-class,// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, —-拖动到—, newIndex)const tempList […that.tableData]/splice 新增删除并以数组的形式返回删除内容此处表示获取删除项对象 */const currentRow tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/ 在新下标前添加一个数据 第二个参数 0 表示不删除即为新增 */console.log(—新数组—, tempList)that.tableData […tempList]}// onEnd: (evt) {// console.log(—-onEnd(拖拽结束)—, evt)// },});}, 3、el-table指定点拖拽完整代码 templatediv classcontentel-table :datatableData idtable_count2 classtable-box stripe border stylewidth: 100%; sizeminiselection-changehandleSelectionChange row-keyidel-table-column typeselection width50 :reserve-selectiontrue aligncenterfixedleft/el-table-columnel-table-column label序号 aligncenter width50 fixedtemplate slot-scopescope{{ scope.\(index 1 }}/template/el-table-columnel-table-column propdate label日期 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propaddress label地址 aligncenter width210/el-table-columnel-table-column label操作 width150 aligncentertemplate slot-scopescopeel-tooltip content复制 placementtopel-button typesuccess plain circle sizeminiclick.stophandleCopy(scope.row, scope.\)index)i classel-icon-box/i/el-button/el-tooltipel-tooltip content删除 placementtopel-button typedanger plain circle sizeminiclick.stophandleDelete(scope.row, scope.$index)i classel-icon-delete/i/el-button/el-tooltipel-tooltip classitem effectdark content长按拖动排序 placementtopel-button typeinfo plain circle sizeminii classel-icon-rank handle_drop stylefont-size: 14px;/i/el-button/el-tooltip/template/el-table-column/el-table/div /templatescript import Sortable from sortablejs //1引入拖拽函数 export default {name: TableBase3,components: {},data() {return {multipleSelection: [],//多选tableData: [{id: 1,date: 2016-05-01,name: 王小虎1,address: 上海市普陀区金沙江路 1510 弄}, {id: 2,date: 2016-05-02,name: 王小虎2,address: 上海市普陀区金沙江路 1511 弄}, {id: 3,date: 2016-05-03,name: 王小虎3,address: 上海市普陀区金沙江路 1512 弄}, {id: 4,date: 2016-05-04,name: 王小虎4,address: 上海市普陀区金沙江路 1513 弄}]}},created() { },mounted() {this.rowDrop() //2组件创建时执行拖拽方法},methods: {// 3拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log(—rowDrop(拖拽初始化)—)const el document.querySelector(#table_count2 .el-tablebody-wrapper tbody);const that this;new Sortable(el, {animation: 150,handle: .handle_drop, //class类名执行事件ghostClass: blue-background-class,// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, —-拖动到—, newIndex)const tempList […that.tableData]/splice 新增删除并以数组的形式返回删除内容此处表示获取删除项对象 */const currentRow tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/ 在新下标前添加一个数据 第二个参数 0 表示不删除即为新增 /console.log(—新数组—, tempList)that.tableData […tempList]}// onEnd: (evt) {// console.log(—-onEnd(拖拽结束)—, evt)// },});},//多选handleSelectionChange(val) {console.log(—-多选 multipleSelection—, val)this.multipleSelection val;},//复制handleCopy(row, rowIndex) {let newList […this.tableData]let newRow { …row }newRow[id] newList.length 1newRow[name] newRow[name] - newList.length 1newList.push(newRow)this.tableData […newList]},//删除handleDelete(row, rowIndex) {this.$modal.confirm(是否确认删除此项, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning,}).then(() {this.tableData.splice(rowIndex, 1)}).catch(() { });}}, }; /scriptstyle langscss scoped ::v-deep {/**el-table表格调整 start/.el-table .el-tableheader-wrapper th,.el-table .el-tablefixed-header-wrapper th {height: auto;padding: 2px 0;}.el-table–mini .el-tablecell {padding: 2px;flex: 1;}/**el-table表格调整 end */ } /style 4、el-table整行拖拽完整代码 templatediv classcontentel-table :datatableData idtable_count classtable-box stripe border stylewidth: 100%; sizeminiselection-changehandleSelectionChange row-keyidel-table-column typeselection width50 :reserve-selectiontrue aligncenterfixedleft/el-table-columnel-table-column label序号 aligncenter width50 fixedtemplate slot-scopescope{{ scope.\(index 1 }}/template/el-table-columnel-table-column propdate label日期 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propaddress label地址 aligncenter width210/el-table-columnel-table-column label操作 width100 aligncenter fixedrighttemplate slot-scopescopeel-tooltip content复制 placementtopel-button typesuccess plain circle sizeminiclick.stophandleCopy(scope.row, scope.\)index)i classel-icon-box/i/el-button/el-tooltipel-tooltip content删除 placementtopel-button typedanger plain circle sizeminiclick.stophandleDelete(scope.row, scope.$index)i classel-icon-delete/i/el-button/el-tooltip/template/el-table-column/el-table/div /templatescript import Sortable from sortablejs //1引入拖拽函数 export default {name: TableBase2,components: {},data() {return {multipleSelection: [],//多选tableData: [{id: 1,date: 2016-05-01,name: 王小虎1,address: 上海市普陀区金沙江路 1510 弄}, {id: 2,date: 2016-05-02,name: 王小虎2,address: 上海市普陀区金沙江路 1511 弄}, {id: 3,date: 2016-05-03,name: 王小虎3,address: 上海市普陀区金沙江路 1512 弄}, {id: 4,date: 2016-05-04,name: 王小虎4,address: 上海市普陀区金沙江路 1513 弄}]}},created() { },mounted() {this.rowDrop() //2组件创建时执行拖拽方法},methods: {// 3拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log(—rowDrop(拖拽初始化)—)const el document.querySelector(#table_count .el-tablebody-wrapper tbody);const that this;Sortable.create(el, {// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, —-拖动到—, newIndex)const tempList […that.tableData]/splice 新增删除并以数组的形式返回删除内容此处表示获取删除项对象 */const currentRow tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/ 在新下标前添加一个数据 第二个参数 0 表示不删除即为新增 /console.log(—新数组—, tempList)that.tableData […tempList]}// onEnd: (evt) {// console.log(—-onEnd(拖拽结束)—, evt)// },})},//多选handleSelectionChange(val) {console.log(—-多选 multipleSelection—, val)this.multipleSelection val;},//复制handleCopy(row, rowIndex) {let newList […this.tableData]let newRow { …row }newRow[id] newList.length 1newRow[name] newRow[name] - newList.length 1newList.push(newRow)this.tableData […newList]},//删除handleDelete(row, rowIndex) {this.$modal.confirm(是否确认删除此项, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning,}).then(() {this.tableData.splice(rowIndex, 1)}).catch(() { });}}, }; /scriptstyle langscss scoped ::v-deep {/**el-table表格调整 start/.el-table .el-tableheader-wrapper th,.el-table .el-tablefixed-header-wrapper th {height: auto;padding: 2px 0;}.el-table–mini .el-table__cell {padding: 2px;flex: 1;}/el-table表格调整 end */ } /style 5、自定义ul li 行拖拽(完整代码–复制即用) templatediv classcontentul idtable_count2!– 注意 key必须是唯一的id, 如果用index就可能导致渲染错误问题 –li classtable_li v-for(item,index) in tableData :keytli_item.id span{{ item.name }}/spani classel-icon-rank handle_drop stylefont-size: 14px;/i/li/ul/div /templatescript import Sortable from sortablejs //1引入拖拽函数 export default {name: TableBase3,components: {},data() {return {tableData: [{id: 1,date: 2016-05-01,name: 王小虎1,address: 上海市普陀区金沙江路 1510 弄}, {id: 2,date: 2016-05-02,name: 王小虎2,address: 上海市普陀区金沙江路 1511 弄}, {id: 3,date: 2016-05-03,name: 王小虎3,address: 上海市普陀区金沙江路 1512 弄}, {id: 4,date: 2016-05-04,name: 王小虎4,address: 上海市普陀区金沙江路 1513 弄}]}},created() { },mounted() {this.rowDrop() //2组件创建时执行拖拽方法},methods: {// 3拖拽方法rowDrop() {// 要侦听拖拽响应的DOM对象console.log(—rowDrop(拖拽初始化)—)const el document.querySelector(#table_count2);const that this;new Sortable(el, {animation: 150,handle: .handle_drop, //class类名执行事件ghostClass: blue-background-class,// 结束拖拽后的回调函数onEnd({ newIndex, oldIndex }) {console.log(oldIndex, —-拖动到—, newIndex)const tempList […that.tableData]/splice 新增删除并以数组的形式返回删除内容此处表示获取删除项对象 */const currentRow tempList.splice(oldIndex, 1)[0];tempList.splice(newIndex, 0, currentRow);/** 在新下标前添加一个数据 第二个参数 0 表示不删除即为新增 */console.log(—新数组—, tempList)that.tableData […tempList]}// onEnd: (evt) {// console.log(—-onEnd(拖拽结束)—, evt)// },});},}, }; /scriptstyle langscss scoped.table_li{width: 500px;padding: 10px;border: 1px solid orange;border-radius: 5px;margin-bottom: 20px;display: flex;align-items: center;justify-content: space-between; } /style 相关文档Element UI table表格行拖动排序_element表格拖拽改变顺序-CSDN博客