标签：vue 表格 value id item 10px 从左往右 margin tableData
使用vue版本：vue@3.2.37
使用vuedraggable版本：vuedraggable@4.1.0
引用了如下脚本：
<script src="~/lib/vue/vue.global.min.js"></script>
<link href="~/lib/element-plus/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/index.full.js"></script>
<script src="~/lib/element-plus/locale/en.js"></script>
<script src="~/lib/element-plus/locale/zh-cn.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/sortablejs/Sortable.min.js"></script>
<script src="~/lib/vuedraggable/dist/vuedraggable.umd.min.js"></script>
实现效果如下图：
代码实现：
<style>
.itxst {
margin: 10px;
text-align: left;
}
.col {
width: 40%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
}
.col2 {
width: 60%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
}
.col + .col {
margin-left: 10px;
}
.item {
padding: 6px 12px;
margin: 0px 10px 0px 10px;
border: solid 1px #eee;
background-color: #f1f1f1;
text-align: left;
}
.item + .item {
border-top: none;
margin-top: 6px;
}
.item:hover {
background-color: #fdfdfd;
cursor: move;
}
.item2 {
padding: 6px 12px;
margin: 0px 10px 0px 10px;
border: solid 1px #eee;
background-color: pink;
text-align: left;
}
.item2 + .item2 {
border-top: none;
margin-top: 6px;
}
.item2:hover {
outline: solid 1px #ddd;
cursor: move;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>
<div id="app">
<!--使用draggable组件-->
<div class="itxst">
<div style="padding-left:6px">往右边拖动试试看</div>
<div class="col">
<draggable :list="arr1" ghost-class="ghost" :force-fallback="true" animation="300" :group="groupA" sort="false">
<template #item="{ element }">
<div class="item">
{{ element.value }}
</div>
</template>
</draggable>
</div>
<div class="col2">
<el-table :data="tableData"
current-row-key="id"
style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column label="姓名" width="180">
<template v-slot="scope">
<draggable :list="scope.row.name" ghost-class="ghost" :force-fallback="true" animation="300" group="itxst" @@add="addarr2(scope.row.id,scope.row.name)">
<template #item="{ element }">
<el-tag :key="element.id"
closable
:disable-transitions="false"
@@close="handleRemove(scope.row.name,element)">
{{element.value}}
</el-tag>
</template>
</draggable>
<el-autocomplete class="input-new-tag" ref="saveTagInput"
size="small" v-if="scope.row.inputVisible"
v-model="scope.row.inputValue"
:fetch-suggestions="querySearch"
clearable
@@trigger-on-focus="false"
@@select="handleSelect($event,scope.row.name,scope.row.id)"></el-autocomplete>
<el-button v-else class="button-new-tag" :key="scope.row.id" size="small" @@click="showInput(scope.row.id)">+ New Tag</el-button>
</template>
</el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</div>
</div>
<script type="text/javascript">
var Main = {
data() {
return {
arr1: [
{ id: 1, value: '王小虎' },
{ id: 2, value: '王二虎' },
{ id: 3, value: '张三' },
{ id: 4, value: '赵四' },
{ id: 5, value: '一甲' }
],
tableData: [
{
id: "1",
date: "2022-08-02",
name: [
{ id: 1, value: '王小虎' },
{ id: 2, value: '王二虎' },
],
address: "深圳市龙岗坂田街道21号",
inputValue: "",
inputVisible: false,
},
{
id: "2",
date: "2022-08-04",
name: [],
address: "深圳市龙岗坂田街道22号",
inputValue: "",
inputVisible: false,
},
{
id: "3",
date: "2022-08-01",
name: [],
address: "深圳市龙岗坂田街道21号",
inputValue: "",
inputVisible: false,
},
{
id: "4",
date: "2022-08-03",
name: [],
address: "深圳市龙岗坂田街道21号",
inputValue: "",
inputVisible: false,
}
],
moveId: -1,
groupA: {
name: 'itxst',
pull: 'clone',
put: false,
},
restaurants: [],
};
},
//注册draggable组件
components: {
'draggable': window.vuedraggable
},
mounted() {
this.restaurants = this.loadAll();
},
methods: {
loadAll() {
return this.arr1;
},
//左边往右边拖动时的事件
addarr2(_id, _data, e) {
const map = new Map()
const qc = _data.filter(item => !map.has(item.id) && map.set(item.id, 1))
for (var i = 0; i < this.tableData.length; i++) {
if (this.tableData[i].id == _id) {
this.tableData[i].name = qc;
break;
}
}
},
handleRemove(datalist,tag) {
datalist.splice(datalist.indexOf(tag), 1);
},
showInput(_id) {
for (var i = 0; i < this.tableData.length; i++) {
if (this.tableData[i].id == _id) {
this.tableData[i].inputVisible = true;
break;
}
}
},
querySearch(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
handleSelect(item, datalist, _id) {
if (item) {
datalist.push(item);
const map = new Map()
const qc = datalist.filter(item => !map.has(item.id) && map.set(item.id, 1))
for (var i = 0; i < this.tableData.length; i++) {
if (this.tableData[i].id == _id) {
this.tableData[i].name = qc;
this.tableData[i].inputValue = "";
this.tableData[i].inputVisible = false;
break;
}
}
}
}
},
};
const app = Vue.createApp(Main);
app.use(ElementPlus)
const reportDataVM = app.mount("#app");
</script>
标签：vue,表格,value,id,item,10px,从左往右,margin,tableData 来源： https://www.cnblogs.com/bingshao/p/16554816.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。