使用:
<common-table
class="table"
:columns="columns"
:contents="tableData"
:pagination="pagination"
></common-table>
import CommonTable from '@/components/commonTable/commonTable.vue';
data() {
return {
columns: [
{
no: 'taskNo',
prop: 'topic',
label: '需求主题',
type: 'routerlink',
linkName: '/#/task/',
paramsName: 'taskNo',
showTooltip: true,
onClick: data => {
if (data.type === 4) {
}
},
width: 180
},
{ prop: 'typeDesc', label: '需求类型', type: 'text', width: 100 },
{ prop: 'priorityObj', label: '优先级', type: 'priority', width: 120 },
{ prop: 'statusDesc', label: '状态', type: 'text', width: 80 }
],
tableData: [],
pagination: {
total: 0,
currentPage: 1,
currentPageSize: 10,
currentPageChange: page => {
this.pagination.currentPage = page;
this.params.searchFlag = false;
this.handleflushFilter(this.params);
},
sizeChange: size => {
this.pagination.currentPageSize = size;
this.params.searchFlag = false;
this.handleflushFilter(this.params);
}
}
}
}
使用:
<single-table
class="table"
:columns="columns"
:contents="tableData"
:pagination="pagination"
:singleSelectionChange="handleSingleSelectionChange"
:clearFlag="clearFlag">
</single-table>
import singleTable from '@/components/singleTable/singleTable.vue';
data() {
return {
// 列数据
columns: [
{ prop: 'groupName', label: '用户组' },
{
prop: 'userCount',
label: '用户数'
},
{ prop: 'isDeletedDesc', label: '状态' }
],
// table 数据
tableData: [],
// 底部导航数据
pagination: {
total: 0,
currentPage: 1,
currentPageSize: 10,
currentPageChange: page => {
this.pagination.currentPage = page;
this.getGroupList();
},
sizeChange: size => {
console.log('更改每页显示条数', size);
}
},
}
},
methods:{
handleSingleSelectionChange(row) {
this.currentRow = row;
}
}
使用:<picturePreview :imgUrl="url" :isVisible="pictureVisible"></picturePreview>
import CommonTable from '@/components/picturePreview.vue';
添加指令:
// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {
bind(el, binding, vnode, oldVnode) {
const dragDom = binding.value.$el.querySelector('.el-dialog')
el.onmousedown = e => {
// 鼠标按下,计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft
document.onmousemove = function(e) {
e.preventDefault() // 移动时禁用默认事件
// 通过事件委托,计算移动的距离
const l = e.clientX - disX
dragDom.style.width = `${l}px`
}
document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
使用:<quill-editor :quillEditorContent="quillEditorContent"></quill-editor>
import QuillEditor from '@components/quillEditor/quillEditor.vue';
data(){
return {
quillEditorContent: {
content: '' // 富文本框的默认值
},
}
}
使用:
<inline-search-select @select-change="handleChange"></inline-search-select>
import inline-search-select from '@components/inline-search-select.vue';